Full Page Background Images with CSS

[treehouse presents] 0:00 [Full Page Background Images In CSS with Guil Hernandez] 0:02 Hey, guys, I’m Guil. 0:05 In this Treehouse quick tip, we’ll learn about a 0:07 neat new CSS3 property and value we can use 0:09 to create scalable full-page background images. 0:11 Let’s get started. 0:14 Here we have a page containing a background image, 0:16 and as you’ve probably noticed, 0:18 the image appears too large. 0:20 Parts of the image are being cut off, 0:22 and it does not scale to the size of the browser window. 0:24 So things could be much better here. 0:28 A good solution would be to scale the image 0:30 to make it fit within different window sizes 0:32 while preserving its original proportions. 0:35 Well, we can do just that with one easy CSS declaration. 0:37 In our CSS, below our background declaration, 0:41 we’ll add the background size property. 0:45 Besides the usual numeric length values, 0:49 the background size property has a particular predefined value 0:51 that ensures your background image will display 0:55 entirely at a scaled size, 0:58 and that value is cover. 1:00 The cover value fills the entire background positioning area, 1:03 which in this case is the HTML element. 1:07 It adjusts the image to completely contain the browser window 1:10 and scales it so that both its width and height 1:14 display proportionately as a full background image. 1:17 So just make sure that the height value is set to 100%. 1:20 Using the cover value does allow for overflow 1:27 when the background image proportions don’t exactly 1:30 match those of the containing area. 1:32 So some parts may get cut off if the area is too narrow or short. 1:35

You need to sign up for Treehouse in order to set up Workspace

Sign up