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

CSS

Angelina Bethoney
Angelina Bethoney
117 Points
Posted by Angelina Bethoney
Angelina Bethoney
117 Points

background-size:cover is cropping my picture

I'm trying to use a photo for a background picture. the photo is already optimized for web. whenever I try these:

background-size: cover;

background-size: 100% 100%;

my picture is cropped.

when I try

background-size:contain

the sides of the picture do not expand to cover the whole background.

does anyone have a suggestion for me? please?

2 Answers

Angelina Bethoney
Angelina Bethoney
117 Points
Angelina Bethoney
Angelina Bethoney
117 Points

I was able to figure this out. Not sure how to close this question. My actual photo was incorrectly cropped :(

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points
Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

Unfortunately, that's how background: cover; works. If the photo doesn't have the exact same aspect ratio as the container whose background you're trying to set it as, it's either going to crop some of the photo out (cover) or you're going to have uncovered areas (contain). The only workaround is to have the container be the exact same aspect ratio as your photo.