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

vy le oai
vy le oai
4,697 Points
Posted by vy le oai
vy le oai
4,697 Points

background image doesn't scale to fit the site

Live demo: http://leoaivy.github.io/projects/poster_inside/html/1_P.01_login.html

Questoin: ".login-bg-wrap a img" work well on desktop with max-width set to 100%. But on narrower devices like iphone 6, the background images just scale to fit the width of view port, which make their height become smaller. I set heihgt to just 1% or 100% but they scale to their original size. I don't know why? And is there a way to make the height of these images fit the height of the site?

1 Answer

Joe Hartman
Joe Hartman
20,881 Points

This is the expected behavior. When the viewport narrows, the image will scale height and width proportionately. If you want the entire area covered set your background-size property to cover. Of course, as the screen narrows more and more of the right side of the picture will be cut off but that's the trade-off.

If this is unacceptable, maybe use two different designs, something like a seamless tiling background or solid color as the default for smaller-width screens and then use a media query to display the picture for wider screens.