Apple have just released their new iOS7 operating system but it's causing issues with my retina icon media queries. It appears the background-size property is being ignored. An example image is here: http://imgur.com/R3OgFgN
The image replacement works perfectly on iPhones 4, 4s, 5 running iOS6 and below (any browser). iOS7 browsers appear to grab the high-res image but ignore the background-size property:
#media (-webkit-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
-webkit-background-size: 100%;
-moz-background-size: 100%;
background-size: 100%;
}
What it does do;
Replaces the original image with the #2x image
What it doesn't do;
Fit the background image to the div element size.
Tested on iOS7 Safari & Chrome.
Has anyone had this problem, and if so how did you manage to fix it?
I solved it! Turns out, iOS7 resets the background-size property when running a media query. The trick is to specify the background-size with the exact pixel dimensions, or with a 100% value like so;
#media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx){
.logo{
background: url(../img/2x/logo#2x.png) no-repeat 0 0 !important;
background-size: 100% !important;
width: 30px;
height: 40px;
}
N.b - I also found that including the !important tag ensured all retina devices read the query properly, including Samsung S3 & S4. Enjoy.
This is not buggy behaviour. This is your fault.
You set all background properties here:
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
so browser treats this as
background-image:url(../img/2x/m-yellloh-logo#2x.png) !important
background-position:0 0 !important
background-repeat:no-repeat !important
background-size:auto auto !important
and so on
thus your last line background-size: 100%; is overridden by background-size:auto auto !important;
Because the example is an image. I cannot inspect the code.
You might try the following option:
If the div's width and height is fixed. You can set a fixed width and height to the image. also normally the retina-display need the "min-device-pixel-ratio" for high resolution display.
e.g.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
width: 200px;
height: 100px;
}
or if the div is not fixed.
#media (-webkit-min-device-pixel-ratio: 2)
and (min-device-pixel-ratio: 2){
.b .logo{
background: url(../img/2x/m-yellloh-logo#2x.png) no-repeat 0 0 !important;
background-size: contain;
}
Try if this can fix your issue.
Cheers!
Related
I can't adjust background img of a div so it is filled by the image, regardless of div's and img's size. If the image is smaller then it should be streched and vice versa. The whole image should be visible, regardless of deformation and loss of quality.
I tried all this combinations and permutations, and many more. Simply - doesn't work.
background-repeat: no-repeat;
background-position: top center;
background-size: auto;
background-size: cover;
background-size: contain;
background-size: 100% 100%;
I use Firefox 22, css is valid css3, according to W3C validator.
This is for CSS3 only
background-size: 100% 100%;
UPD: For old IE you can use filters:
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale')"; /* IE8 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='imgpath', sizingMethod='scale'); /* pre IE8 */
Try setting the same height and width for the image which you have given for the div.
var currentHeight = $('.element_class').height();
var currentWidth = $('.element_class').width();
$('.yourimage').height()=currentHeight;
$('.yourimage').height()=currentWidth;
On desktop Webkit, my image displays fine with no problems. When viewing it on mobile Webkit (iPad iOS 5 for example), a glaring white border appears. I am using background-image and background-size because my element has a fixed proportion, but the image source itself can be any random proportion.
JSFiddle:
http://jsfiddle.net/tokyotech/A2zAv/
HTML:
<img />
CSS:
body {
background: #666; }
img {
width: 8em;
height: 8em;
display: block;
background: rgba(0,0,0,0.5);
box-shadow: 0 1px 0 rgba(255,255,255,0.1),
0 1px 0 rgba(0,0,0,0.5) inset;
background-size: cover;
border-radius: 0.4em;
background-image: url(http://1.bp.blogspot.com/_yhfaur8OkQ0/SwQzJkzYt5I/AAAAAAAAAtU/5eIqHFmS63s/s400/ev.jpg);
}
This is a weird issue that happens when you don't specify an img src. The browser wants to show that the element exists but doesn't have any content so it wraps it with a border. You can fix this by declaring the img's source in the HTML.
Try this fiddle: http://jsfiddle.net/A2zAv/3/
If you don't want to declare an img src, don't use the img element for your image. You could use a div and get around this rendering issue instead. This will allow you to contain the image to the container as needed.
http://jsfiddle.net/A2zAv/4/
As a further alternate, you could insert a 1px by 1px transparent spacer gif in your image's src if you absolutely want to use an img tag.
See Strange border on IMG tag for more details.
I have a div named "page". I set its background-image with CSS, using the code below. I size the image to take 100% of the div's width, and it sets nicely its height to keep its scale. But when I set "background-attachment: fixed", it resizes the image. It increases the image size, and now it doesn't fit into my div, so most of it is cut.
I will highly appreciate any help.
The CSS code:
#page {
height: 100%;
width: 60%;
margin: 0 auto;
background-image: url('bg2.jpg');
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
background-repeat: no-repeat;
background-attachment: fixed;
}
I have just encountered the same issue with a background image sized using background-size: contain;.
When I set the background-attachment to fixed, the sizing no longer applies to the element carrying the background image, but instead it seems to apply to the viewport, so it's much larger and extends beyond the original element.
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media
should be center-aligned website
I have built a website as above link, with wrapper center aligned properly in PC/Mac browsers. However, when running in iphone safari, it is left aligned, but not center aligned.
the wrapper code is:
#wrapper {
width: 939px;
background-color: #fff;
margin: 40px auto 5px auto;
padding-bottom: 50px;
}
Any ideas on it?
Thanks.
have you tryd:
#wrapper{
text-align: center;
}
#wrapper <yourChildrenId/yourChildrenClass/yourChildrenTag>{
display: inline-block;
//or
display: inline;
}
Mini hack, but if you set meta content width to the widest centered div it forces the iPhone screen to be that wide and doesn't mess the div centering up.
<meta name="viewport" content="width=[widest centered div];"/>
#wrapper{
width: 939px;
background-color: #fff;
margin: 0 auto;
padding-bottom: 50px;
}
Should do it. I dont know why you need the margin-top.? The provided link doesn't seem to work.
If you only need to support iPhone Safari or CSS3 compatible browsers, here's an elegant approach: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center