Welcome to the Treehouse Community
Looking to learn something new?
SeHyun Choi3,441 Points
How to make background-image responsive
background-image:url(" "); background-size:cover; background-repeat:no-repeat;
But when the screen gets to certain size (small) it doesn't show all the image. How do I fix that?
Steven Parker221,046 Points
It's normal for "cover" to trim off parts of the image to maintain the aspect ratio.
You could use "contain" instead of "cover" to insure the whole image is displayed, but then either the image will repeat or you get blank areas on the sides or top and bottom (known as "letterboxing").
The alternatives to these would distort the aspect ratio, which is generally even less desirable.
Lan HuynhFront End Web Development Techdegree Student 5,906 Points
If aspect ratio is not important to you, "background-size: 100% 100%;" is probably one way.