Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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.