I have a little problem with media query for retina images.
I have this block.less:
.page-header {
background: #bg-dark url("../images/bg-back-mobile.jpg") no-repeat center top;
#media #retina {
background-image: url("../images/bg-back-mobile#2x.jpg");
background-size: 700px auto;
}
}
#media #tablet-width {
.page-header {
background-image: url("../images/bg-back-tablet#1x.jpg");
#media #retina {
background-image: url("../images/bg-back-tablet#2x.jpg");
background-size: 1200px auto;
}
}
}
#media #desktop-width {
.page-header {
background-image: url("../images/bg-back-desktop.jpg");
}
}
and vars.less:
#tablet-width: ~"(min-width: 700px)";
#desktop-width: ~"(min-width: 1200px)";
#retina: ~"(min-resolution: 144dpi), (min-resolution: 1.5dppx)";
When I'm testing this background-image on mobile device (width: 320px, DPR: 2.0), there is downoading url("../images/bg-back-tablet#2x.jpg") but not url("../images/bg-back-mobile#2x.jpg").
When I delete this part
#media #retina {
background-image: url("../images/bg-back-tablet#2x.jpg");
background-size: 1200px auto;
}
it's working right.
What's wrong?
Related
I would like to change the background based on a boolean.
If I have two backgrounds in CSS:
.background {
background-image: url('../assets/images/Background.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 670px;
#media screen and (min-width: 1920px) {
background-size: 100% 800px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 1200px;
}
}
.performance-background {
background-image: url('../assets/images/Background-performance.png');
background-repeat: no-repeat;
background-size: contain;
#media screen and (max-width: 1280px) {
}
background-size: 100% 335px;
#media screen and (min-width: 1920px) {
background-size: 100% 325px;
}
#media screen and (min-width: 2560px) {
background-size: 100% 325px;
}
}
I would like to use something similar to:
[ngClass]="{ 'background': displayBackground, 'performance-background': displayPerformanceBackground}"
Thank you so much.
You can add different classes depending of a boolean state using angular ngClass and a ternary operator in a HTML tag
example:
HTML:
<div [ngClass]="boolean ? 'trueClass' : 'falseClass'"> Example Text</div>
"boolean" is a variable and if it is set to true the html tag will use "trueClass" class, else "falseClass"
CSS:
.trueClass{
background: red
}
.falseClass{
background:blue
}
Good morning,
I have created a media query for my website. I have the feeling that it is slowing down my website, because it is not optimized.
On mobile phones, I have a specific image. For tablets and desktops I have another image to be shown.
The media query I have works just fine. But it is not optimized.
Can anyone help me to get it optimized?
this is the query:
body, html {
height : 100%;
width: 100%;
margin:0;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height:100vh;
}
}
Please use this CSS code.
In media query, styles defined outside of query is inherited.
So my code works exactly like yours, but the code has been greatly reduced.
body, html {
height : 100%;
width: 100%;
margin:0;
}
.Frontpage-image {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
height: 100vh;
}
#media only screen and (min-width: 320px) {
.Frontpage-image {
background-image: url("https://dit.be/wp-content/uploads/2021/01/mobiel-01.svg");
}
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 768px) {
.Frontpage-image{
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
#media screen and (min-width: 1025px) {
.Frontpage-image {
background-image:url("https://dit.be/wp-content/uploads/2021/01/desktop-01.svg");
}
}
You can check this answer.
Here are some tips to optimize this
Use Low size images
Use Low size videos or embed them from YouTube or Vimeo
Compress this CSS code.
У меня есть следующий код
.bg-if-premium {
background-image: url(photo_2021-05-22_20-40-40.jpg);
background-size: 100% 100% !important;
background-position: fixed;
background-attachment: fixed;
}
.bg-if-free {
background-image: url(photo_2021-04-16_16-43-00.jpg);
background-size: 100% 100%;
background-position: fixed;
background-attachment: fixed;
}
#media (max-width: 767px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
#media (max-width: 480px) {
.bg-if-premium .bg-if-free {
background-image: none;
}
}
But on a mobile device, the background is still present. How to solve the problem?
#media screen and (max-width: 767px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
#media screen and (max-width: 480px) {
.bg-if-premium,
.bg-if-free {
background-image: none;
}
}
Include the #media screen and (desired width) and like Mordred stated, separate the class identifiers by a comma.
Also since it looks like your working from a website first approach, you shouldn't have to include both of these screen queries. The first one will do the trick.
I'm trying to have 3 different logo sizes (small, med, big) based on different screen sizes. Here's my code:
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
This works swapping from big to med, but it won't swap again from med to small. Why?
Try to use the min-width on the second media query also. Even when the screen is small the second query is true and the last css gets preference so its loading the second query image.
Make the following change.
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
}
}
#media screen and (min-width: 487px) and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
}
}
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
}
}
You can order it like this:
CSS:
#media screen and (min-width: 1080px) {
.site-header .site-branding {
background-image: url("../images/logo_big.png") !important;
background: blue;
}
}
#media screen and (max-width: 1079px) {
.site-header .site-branding {
background-image: url("../images/logo_med.png") !important;
background: green;
}
}
#media screen and (max-width: 487px) {
.site-header .site-branding {
background-image: url("../images/logo_small.png") !important;
background: red;
}
}
DEMO HERE
See: http://css-tricks.com/logic-in-media-queries/ under 'Overriding'.
I think what is happening is both the first and second media queries are true, so the second one is overriding the first; thus, never reaching the point to switch to small.
Solution: move the first media query to be the final one... should fix it and adjust accordingly.
So this is a tricky question I know. I've faced the issues with sprites and high contrast mode, basically it can be solved with code as follows:
.icon:before {
content: url(icons.png);
position:relative;
left:-2px;
top:-109px;
}
.icon {
width:17px;
height:18px;
display:inline-block;
overflow:hidden;
}
That's nice. It does work. However, if I change the content url for retina, the image will be much much bigger and hence, it will fail.
Is there anyway to have the best of both worlds?
If you want to display your image the same way as non retina images, you need to set up the width of your image.
Here a some examples:
Here is an example with min-width (responsive design)
Desktop css:
.site-header {
position: relative;
background: url('assets/images/XXXX.jpg') 0px 0px no-repeat;
height: 155px;
background-size: cover;
background-position:center;
}
Retina on responsive design
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
only screen and ( min-device-pixel-ratio: 2) and (min-width: 768px),
only screen and ( min-resolution: 192dpi) and (min-width: 768px),
only screen and ( min-resolution: 2dppx) and (min-width: 768px) {
.site-header
{
position: relative;
background: url('assets/images/GBBO_BG_1536_R.jpg') 0px 0px no-repeat;
height: 148px;
background-size:cover;
}
/* Iphone P */
#header #logo_home {
width: 154px;
height: 102px;
background: url('assets/images/GBBO_logo_1536_R.png') 0px 0px no-repeat;
background-size: 100% auto;
}
}
To remove the responsive effect, remove the "and (min-width: 768px)"