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

HTML

Ryan Canty
PLUS
Ryan Canty
Courses Plus Student 5,665 Points
Posted by Ryan Canty
Ryan Canty
Courses Plus Student 5,665 Points

How can I prevent my background-image from zooming in when I expand the browser?

When I expand my browser beyond about 90% of the width, my image begins to get larger to compensate but as a result it looks like the image is being zoomed in on and it looks terrible. Is there a specific size my background images must be to prevent this? I am using this for my background-image code:

''' .blue-wrapper { background: url("/Users/ryancanty/Desktop/portfolio/website/png/portfolio_background_final.png") no-repeat center; background-size: cover; }

'''

1 Answer

Matthew Long
Matthew Long
28,407 Points
Matthew Long
Matthew Long
28,407 Points

I find background-size cover to look the best, but if you don't like how it zooms in maybe consider using background-size contain or inherit. If these don't work out editing the image might be your best bet. Maybe consider the aspect ratio of your background image as well.