Fixed background image with ios7

Question

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?

Answer 1

Or you can just put a transparent div that covers the screen and use overflow:scroll. Just for the sake of it you can rewrite the height of the div with javascript to screen.height.

#scrollbox {
	width: 100%;
	height: 100%;
	overflow: scroll;
	background: transparent;
}

document.getElementByID("scrollbox").style.height = screen.height;

Answer 2

.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

I believe I have achieved the desired effect on my own site using the above in conjunction with a fix to allow 100vh to work on ios devices.

Answer 3

Know this is an old thread, but wanted to provide an updated solution that builds on the solution from @Cruz-Nunez

Relying on viewport size is liable to fail. For example, relying on a 767px viewport won't work on iPads, and increasing the size negates the benefit of this approach.

Instead, you can check if the device has hover capabilities, and if it doesn't, override like this:

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

You can also check if the device has a course pointer (e.g. a finger) instead of a fine one (e.g. a mouse):

@media (pointer: coarse) { ... }

Answer 4

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

Answer 5

I had a very simple solution for this, after struggling with all the methods of fixing this.

i had the problem on my mobile IOS devices.

css (desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Then i overwrite it with media query removing "fixed" as background attachment.

css (mobile)

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.

This worked for me on every device. Hope it helps someone else as well.

Answer 6

Try this:

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle example

Live example