In this Treehouse Quick Tip, we’ll learn how to create scalable full-page background images with CSS.
This allows you to easily customize the background of your web page with just a single line of CSS.
Best of all, the background image will scale with the browser size to maintain a consistent look across devices and resolutions.
Video Transcription
Guil: Hey, guys. I’m Guil. In this Treehouse Quick Tip, we’ll learn
about a neat, new CSS3 property and value we can use to
create scalable full-page background images. Let’s get
started.
Here we have a page containing a background image and as
you’ve probably noticed, the image appears too large. Parts
of the image are being cut off and it does not scale to the
size of the browser window. So things could be much better
here. A good solution would be to scale the image to make
it fit within different window sizes, while preserving its
original proportions.
Well, we can do just that with one easy CSS declaration. In
our CSS, below our background declaration, we’ll add the
background size property. Besides the usual numeric length
values, the background size property has a particular
predefined value that ensures your background image will
display entirely at a scaled size and that value is cover.
The cover value fills the entire background positioning
area, which in this case is the HTML element. It adjusts
the image to completely contain the browser window, and
scales it so that both its width and height, display
proportionately as a full background image.
So just make sure that the height value is set to 100%.
Using the cover value does allow for overflow when the
background image proportions don’t exactly match those of
the containing area. So some parts may get cut off if the
area is too narrow or short.
Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for
free.
The post Quick Tip: Full Page Background Images in CSS appeared first on Treehouse Blog.