I have a problem loading retina images.
I have got two imagesprites. One normal and one retina.
The problem is that I don't know how to scale down the retina image, it is now twice the size.
This is my css.
.home {
background: url('../images/buttonSprite.png') -49px -52px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 2) {
.home {
background: url('../images/buttonSprite#2x.png') no-repeat -79px -113px !important;
-webkit-background-size:43px 43px;
}
}
How to solve this problem?
Try just this:
.home {
background: url('http://img580.imageshack.us/img580/9284/buttonsprite.png') no-repeat -49px -53px;
width: 43px;
height: 43px;
}
#media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-moz-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3/2), all and (min-device-pixel-ratio: 1.5) {
.home {
background: url('http://img90.imageshack.us/img90/5624/buttonsprite2x.png') no-repeat -39px -56px;
background-size: 200px 496px;
}
}
Notice that I used a pixel-ratio of 1.5, that's pretty much a standard. I also included the other prefixes.
Related
У меня есть следующий код
.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've been trying to add a parallax scrolling effect to a background image on my website.
I'm having problems when the browser height changes. (It will push the image up over the text.) Adding queries using min-height or max-height doesn't seem like a very elegant solution.
Do you suggest I include different sizes of the image for different media queries, or just simply alter the background size and background position?
#headerwrap {
background-color: #3F8BE0;
min-height: 1020px;
padding-top: 85px;
padding-bottom: 0;
text-align: center;
/* Parallax scrolling effect */
background-image: url("../img/globe345.png");
background-size: 800px 800px;
background-position: 50% 155%;
background-attachment: fixed;
background-repeat: no-repeat;
}
And here are the media queries I'm using:
#media (min-width: 590px) and (max-width: 767px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 55%;
min-height: 720px;
}
}
#media (min-width: 320px) and (max-width: 589px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 40%;
min-height: 625px;
}
}
#media (max-height: 950px) {
#headerwrap {
background-size: 450px 450px;
background-position: 50% 75%;
min-height: 710px;
}
}
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?
I'm trying to develop a site to support Retina. I have two images: the regular size and 2x version. My code does not appear to work. I'm on Retina and everything still looks pixelated for me.
header {
background: url(../images/header.jpg) no-repeat;
float: left;
height: 301px;
width: 1000px;
}
#media only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5)
{
.header {
background: url(../images/header_2x.jpg) no-repeat;
}
.logo {
background: url(..images/logo_2x.png);
}
}
.logo {
background: url(../images/logo.png) no-repeat;
display: block;
height: 38px;
margin: 0 auto;
margin-top: 63px;
width: 194px;
}
I'm not quite sure what I am doing wrong.
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)"