How-to: Full-page background photos

Transparency Demo screenshotIn my last post, we took a look at transparency applied to the main element over a large background photo. But I realized that I hadn’t touched on how to make that background photo work!

First, a few thoughts. When using a large background photo – also called a cover photo – you’ll want to be careful to use a photo relevant to the page you’re designing. If the photo is purely being used because you can, then you’re doing it wrong. That should go without saying, but more often than not we see people using effects just because they can. If it doesn’t add anything to the design, don’t do it.

That said, here’s how you can implement a cover photo.

body {
	background: url(images/big_picture.jpg) no-repeat center center fixed;
	background-size:cover;
}

To explain the CSS above, you would assign the <body> tag a background attribute that calls the picture with the url() value. Before you close that attribute, you’ll also want to make sure the picture doesn’t repeat with the no-repeat value, and is centered both horizontally and vertically with center center values, and that the picture does not move when the page is scrolled with the fixed value. Then you can close that attribute. You’ll need another attribute, background-size with a value of cover. This tells the browser to stretch the photo to cover the entire viewport area, no matter the size of that viewport.

There are other things you can do with this, including something called the parallax effect, but we won’t get into that here. There are great tutorials and demos on how to achieve this effect on the web, so have a look around!

Leave a Reply