Perfect Full Page Background Image

#header { width: 100%; height: 100vh; background: url(../img/yourpic.jpg) no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
The goal here is a background image on a website that covers the entire browser window at all times.

From css-tricks.com

More details at https://css-tricks.com/perfect-full-page-background-image/

4 Responses

I would consider using
instead of 600px to cover the full page.
(Browsersupport >IE8)
@Robin I agree with robin. It's best to design with a fluid approach from the start instead of having to change from 600px to 300px, etc, per device. 100vh will fill the entire window regardless of the device.
@Elizabeth Thank you Elizabeth, your right too and with Robin's solutions there's non need to change from 600px to 300px, etc per device. Absolutely right ;)
@Robin Your perfectly right. I tried it out and it works much better. Nevertheless the 600px was just as example for a section, but with 600px the snippet title wouldn't really be right ;)

Thank you Robin for your input ;)

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.