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 CSS Foundations Backgrounds and Borders Advanced Backgrounds

Posted by Darrell Warren
Darrell Warren
6,644 Points

I would like to place a background image into my main-wrapper container. How do I do this?

The image is a 1920px X 1080px jpg. The wrapper is 65% of the viewport.

1 Answer

Justin Burris
Justin Burris
5,061 Points 
.main-wrapper {
    width: 65%;
    margin: 0 auto;
    background-image: url("IMAGE HERE");
    background-size: cover;
}

The background-size: cover; will make it so your image fills the main-wrapper without losing it's dimensions. This will keep the image from scaling funny or skewing.

Darrell Warren
Darrell Warren
6,644 Points

Thank you, Justin...