Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Simon Lindsay
Simon Lindsay
Courses Plus Student 12,179 Points

How do I get a element to take up a users entire viewport?

An example would be first background image on the webpage http://aboutmarco.com. When you change your browser window it will scale and adjust the background image to fill the users entire viewport. Do you know how I could go about achieving the same solution.

2 Answers

Kevin Kenger
Kevin Kenger
32,834 Points

Hey Simon,

You can achieve that by setting the element's width and height properties to 100%. There's a caveat here though, in that you have to set all of the element's ancestors' width and height to 100% as well.

HTML:

<html>
    <body>
        <div>
        </div>
    </body>
</html>

CSS:

html, body, div {
    height: 100%;
    width: 100%;
}

If you need a visual aid, I made a little CodePen where you can check it out and play around with the code if you'd like.

Simon Lindsay
PLUS
Simon Lindsay
Courses Plus Student 12,179 Points
Simon Lindsay
Simon Lindsay
Courses Plus Student 12,179 Points

Brilliant thanks Kevin