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
Michael Leismeister
3,706 PointsHow to make background img's max width 100% while keeping all of picture.
Wondering if it is possible to make BACKGROUND img's scale down (max-width 100%) and keep the entire picture in focus. I have a site like http:// my .studiopress .com /themes / altitude/ #demo-full When you re size site (mobile) the background image changes which is great but the image (the trees) is not the full image it only shows part of image.
Is there a (simple) way to make the whole image fill the width at all sizes?
5 Answers
Garrett Levine
20,305 PointsThere is a CSS property value that will scale the image to the size of it's container.
image {
background-size: cover;
}
Rudy Tan
Courses Plus Student 16,635 PointsYou can provide another background image though, for smaller screens. If you want perfect fill.
Rudy Tan
Courses Plus Student 16,635 PointsYes, becaus it is hard using the backgrond-size: cover or contain since it will not be exactly like you wanted it to be.
Michael Leismeister
3,706 PointsIt is a jpg - yes I know that is what I thought cover did that - however it does not seem the case. Not sure if you can see this link but in the treeshouse css I'm working through it does the same... http:// port-80-t34jvafv59.treehouse-app .com/
Garrett Levine
20,305 PointsWC3 schools revealed that cover may not be what we are looking for after all, perhaps the contain property is what we are looking for!
contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
Michael Leismeister
3,706 PointsYes - background-size: contain; does keep the picture but we no longer have a fill container cover like background - hum
Michael Leismeister
3,706 PointsRudy - do you mean - if I target $media query (max-width 480px) and replace original background with new background image?
Michael Leismeister
3,706 PointsMichael Leismeister
3,706 Pointsyes - but it seems like cover does not Keep the full picture when you re size website. Looks like you loose left and right and focus on center of picture. I was hoping to have picture fill container (cover) and see whole picture at different sizes.
Michael Leismeister
3,706 PointsMichael Leismeister
3,706 PointsAgain I am not sure if this is possible - you can see in the example site I am working with it cuts off the image at smaller sizes. http:// my .studiopress .com /themes / altitude/ #demo-full
Garrett Levine
20,305 PointsGarrett Levine
20,305 PointsThat's interesting. I was under the impression that cover maintained the quality, and always stretched to fit it. If it is cropping off sides of the image, it may have something to do with the container that you've put it in.
what kind of file are you using? .png, .jpg, or .svg?