I have a project that I am using the fixed background image. It works great on everything except ios7. On the ipad the background image is zoomed in and blurry. Here is the CSS code I am using -
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
color: #fff;
background: url(../images/boston2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
here is a link to the live page - www.wdeanmedical.com
What am I missing?
Using background-attachment: fixed
with background-size: cover
causes issues on most mobile browsers (as you've seen). You can try using background-attachment: scroll
. This won't give your desired effect, but you'll see the images at least. You could use a media-query or two to limit it to devices that are tablets or phones by using @media screen and (max-device-width: 1024px){}
OR
You can use background-position: scroll
and include some javascript that will keep the image at the scrolled position (keeping it at the top of the window): DEMO