LearnQuick Tip: Full Page Background Images in CSS


Guil Hernandez
writes on October 22, 2012

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

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


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

3 Responses to “Quick Tip: Full Page Background Images in CSS”

  1. Bartlomiej on May 5, 2017 at 8:48 am said:

    I really appreciate the work you do thank you.

  2. Hi Daniel,

    Sorry if this reply is too late, but I’ve watched the same videos you did at Treehouse and basing on what Guil teaches there, it appears to me that the tag is the root of the html document, not any kind of generic, versatile tag. Thus the difference with universal selector, only imho as another student, is that the html selector selects the root tag of the document (therefore, doesn’t place the image in a div or in the header, but in the whole html page), whereas the * would select EVERY tag of the html and apply the respective CSS rule.
    Hope that is clear and that it helps, even if late.

  3. Daniel Kip on August 3, 2016 at 1:47 pm said:

    Guil, I am here after watching you CSS Basics video and I have one question.

    On the video within this page, you select the html element on your CSS. I suppose the goal is to be generic and select all background images. Could I then apply it to the universal selector? Would it be right and practical as well?

    Thank you for your amazing videos and explanations.

    Best regards from Brazil,

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop