I'm not generally a fan of background images but there are some occasions when it can work.

 

This is a new project that I'm experimenting with: http://pizza.testblog.co.uk/

 

It's a one page site (client requirement) and the background is fine on a desktop but not on anything else. On smaller devices the background image stretches to fill the whole age height. Google hasn't found a solution.

 

The requirement is:

 

A fixed position background image that is responsive to the width but is always 100% of the screen on any device

 

Anyone got any clues on how to fix this?

background-size: cover has issues on iOS devices, it uses body height rather than viewport height like desktops.

 

Check out that known issues tabs at http://caniuse.com/#feat=background-img-opts

 

• iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;
• iOS Safari has buggy behavior with background-size: cover; on a page's body.

 

I think you'll have to Google up some of the older alternatives to background-size: cover for getting full-page backgrounds on mobile.

background-attachment fixed has horrible scroll performance implications.

 

What you want to do is create an element that has position fixed and positioned over the entire viewport and add background-size: cover. It has no browser issues in this instance. Also add transform: translateZ(0) to force this into a composite layer which forces GPU rendering, this will also improve scroll performance.

Then add another container to hold all your content and place it above your background image using z-index.

<div class="page-background"></div>
<div class="page-content">
  ... All your content
</div>


.page-background {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('my-background.jpg');
  background-size: cover;
  transform: translateZ(0);
}

.page-content {
  position: relative;
  z-index: 1;
}

Edited June 14, 201610 yr by rbrtsmith

Brilliant!

 

Looking at the code it's seems very simple and logical - I just couldn't work out how to do it myself

 

You are now on my Christmas Card list forever.

background-size: cover has issues on iOS devices, it uses body height rather than viewport height like desktops.

 

Check out that known issues tabs at http://caniuse.com/#feat=background-img-opts

 

 

I think you'll have to Google up some of the older alternatives to background-size: cover for getting full-page backgrounds on mobile.

 

And in this case if you don't want a fixed background but wish it to occupy the space, don't attach it to the body element, attach it to a generic wrapping element.

Also add transform: translateZ(0) to force this into a composite layer which forces GPU rendering, this will also improve scroll performance.

I learned something new today

Edited June 14, 201610 yr by andy9l
Wrong smiley.

 

I learned something new today

 

Just be careful with this, if you add this to a large number of elements you may actually hurt performance, especially in devices with less memory available in their GPU's. Paul Irish has covered this quite extensively and a good ballpark maximum at any one time is 15-20. It is possible to add this dynamically with JavaScript in a just-in-time manner.

However in the latest browsers you can use the will-change: [property] which sort of automates the above.