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

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

How to make a photo cover the entire width of a browser from edge to edge?

.banner {
  height: 350px;
  text-align: center;
  background: url('../img/lion-predator-big-cat-cat-162093.jpeg') no-repeat center;
  background-size: cover;
}

This is what I did, the banner looks fine, it's just that there is still some whitespace on the sides of the image. How do I make the image use up the entire width of the browser?

Connor Brown
Connor Brown
Courses Plus Student 1,046 Points
Connor Brown
Connor Brown
Courses Plus Student 1,046 Points

Hi Luqman,

Sounds like the parent elements (Anything its wrapped in) has padding, margins or set widths, use chrome inspect element to make sure there are no extra paddings hiding in there preventing the .banner div being full width.

Best, Connor

1 Answer

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

The body element has margins by default, you probably need to remove them.

body {
    margin: 0;
}
Luqman Shah
Luqman Shah
3,016 Points
Luqman Shah
Luqman Shah
3,016 Points

Ahh that worked, thank you so much.