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 Mark Libario
Mark Libario
9,003 Points

background-image: cover; why does it crop my image? I thought it automatically keeps its dimensions.,

Im trying to put a background image of a landscape phopto on my main header.

I used the value cover, but it crops the image depending on the size of the container..

I thought by using background-image: cover, it will fill up the entire space buit at the same time maintain how the photo looks like by being able to see the full photo and not a cropped one.

Any tips on how I can work on this problem?

3 Answers

Shane Oliver
Shane Oliver
19,977 Points

Add an explicit width and height to the image. Width 100% and height 100%

Mark Libario
Mark Libario
9,003 Points
Mark Libario
Mark Libario
9,003 Points

how would i do that if my background-image is directly attached to my header like this:

header {
  display: flex;
  background-position: center;
  background: url('../img/lagoon1.jpg') no-repeat center;
  background-size: cover;
}

if i change the size, the main header container box will change no? and not just the background image on it.

Mark Libario
Mark Libario
9,003 Points
Mark Libario
Mark Libario
9,003 Points

Found it, like you said.

background-size: 100% 100%;