Full screen background images

I’m putting this here for my own sanity. If I had £1 for every time I’ve tried to solve this issue!

The goal here is to have a background image that covers the whole of the browser window. Ideally we want it to scale, stay centred, and keep it’s correct proportions.

My go-to article on this is Chris Coyier’s Perfect Full Page Background Images. I was trying the “Awesome, Easy, Progressive CSS3 Way”, but was having difficulty on IOS.

A bit more Googling brought me back to CSS-Tricks and to this thread where a solution is posted by k00ka. Here’s the CSS:

html {
background: url('http://placebear.com/1200/800') no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}

body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Tags: ,

WordPress SEO: 10 tips for better search rankings

FREE E-book. Learn the basics of WordPress SEO and how to improve the key metrics
  • We won't sell your address to anyone. We hate spam too.
View my portfolio Get in touch

Leave a Reply