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!
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
Brendan O'Brien
9,066 PointsBest practices for div background images
Hello everyone,
Just wondering if anyone has some advice when creating a div with a background image. I'm thinking of the www.shopify.ca website. The large image under the navigation adjusts to the size of the browser (to a point).
I like the idea of having a header image that takes up the width of the screen (mobile, tablet, desktop) and adjusts accordingly.
6 Answers
James Barnett
39,199 PointsThe easiest way is to use the CSS3 property background-size: cover;
You can read about that and several other ways to add a full page background image
Brendan O'Brien
9,066 PointsThanks, that's a huge help. I was lost in the internet for a couple hours trying to find a good answer. Thanks again.
Guil Hernandez
Treehouse TeacherWe did a Quick Tip on this, too :)
Brendan O'Brien
9,066 PointsThanks Guil! Great video. What was the CSS for the white box you had over top of the background?
Guil Hernandez
Treehouse TeacherHi Brendan,
In the Quick Tip, you can see the CSS for it in the div rule. It's kind of meant to resemble a site "wrapper" or container.
I get into the cover and contain values in my Backgrounds and Borders Deep Dive.
Brendan O'Brien
9,066 Pointsah okay, great. Thanks again. :)