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

Anthony Domina
PLUS
Anthony Domina
Courses Plus Student 19,571 Points
Posted by Anthony Domina
Anthony Domina
Courses Plus Student 19,571 Points

CSS how do I zoom out from a background image?

Using CSS I've added a background picture with the background-size: cover;

Problem is that the picture is zoomed in too much. For example, the picture is of a house but the cover setting shows mostly just the roof. I have played with the positioning however I am still zoomed in too much on the picture.

Another metaphor. I feel like I am looking at my house while standing at the front door. I need to be looking at my house from the street. What CSS should I use? Zoom? Scale? Any recommendations? Thank you!

Mike Wagner
Mike Wagner
23,559 Points

It would be helpful to see how you're implementing your image and what you're doing with it, but I'm guessing you aren't constraining the size of the image anywhere and it's just a higher resolution than you expected it to be. You might try tweaking the background-size: 100px 80px; (adjusting the values, of course) to see if you can obtain the desired results. Alternatively, you can pass contain (largest size possible while keeping all 4 edges within the container) or cover to background-size (the size in which the smallest measurement of your image dimensions matches the respective container edge, but allowing runoff in the larger dimension). You can check out this for a bit of information on it

3 Answers

Chris Jardine
Chris Jardine
13,299 Points
Chris Jardine
Chris Jardine
13,299 Points

Hi Anthony

You could try "background-size: contain;" which will fit the entire image within the background area. If you do want to use "background-size: cover" you could add "background-position: center;" which will center the image within the background area.

I hope this helps.

Angyal István
Angyal István
11,259 Points
Angyal István
Angyal István
11,259 Points

If You use the background-size: attributume, with cover value, it means the whole element will be covered by the image, so it will be scaled to cover that element, and if just the roof seeing, may You can set the bacground-position atributume to center value, it means the image center will be at the element center, so not just the roof being seen.

Slove the problem, if u scale the bacground it wont be cover the whole element, if it not problem try the bacground-size atributume with the contain value, what means it will be scale to the whole image is be seen. In that case You need to set the bacground-repeat atributum with no-repeate vale, to avoid that the element's background will be fill like mosaic, and You can also algin the background with the bacground-position atributum. Or You can add the values of the bacground-size by Yourself, like background-size: 100% 50%; that means the width of the backround will be as width as the element, and the height of the background will be the half of the element.

I hope I can help You!

Anthony Domina
PLUS
Anthony Domina
Courses Plus Student 19,571 Points
Anthony Domina
Anthony Domina
Courses Plus Student 19,571 Points

Thanks for the feedback everybody! I will definitely try out all of this. For context, if it helps, if you click the link below, the 3rd image of the carousel shows a red temple. It's zoomed in too much on the roof.

Same situation with the deer on the first image. It would be nice to zoom out just a little bit so that the kids are more visible around the deer.

http://be-tony.com/Nara.html

Mike Wagner
Mike Wagner
23,559 Points

The fault seems to lie in the dimensions of your images. If you want them to stretch 100% of the width of your page, the only way you can see more vertically is to extend the height of your jumbotron area or to "squash" your images, which would make them disproportionate and looking stretched. The only other solution would be to find new images that were in a more "widescreen" format. Also, the way you have the images set up now, once the screen width drops below 770px, the images in the jumbotron are no longer capable of fitting and are thus not displayed. I would consider setting them up as responsive images that are capable of shrinking down to a certain point and then, if you don't want them to shrink further if the page gets smaller, set the display of the jumbotron to none or disable it in some other way so it disappears.