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

Posted by Casey Clayton
Casey Clayton
16,708 Points

Problem with Background Image

Hey guys I was doing some playing around with Bootstrap 3 CSS framework and made a basic layout with a jumbotron, I then re-did the layout with flexbox on codepen(less graphical of course) and it seemed to work. So I had made a complete layout in photoshop but the problem I am having is the the background image for the Jumbotron container will not go the full height of the container, width is fine but height isn't. I am using the background-size: cover property but wondering if you could review the code and help me fix this.

Link: http://cdpn.io/onKzF

1 Answer

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

You need to set a height on the jumbotron class.

Casey Clayton
Casey Clayton
16,708 Points

I have tried this using height: 100%; I don't want the image to be full size I want it be the exact size of the container and height: 100% doesn't do anything at all when I apply it.

Colin Marshall
Colin Marshall
32,861 Points

Your container is 62px in height so set the jumbotron class's height to 62px.

Colin Marshall
Colin Marshall
32,861 Points

Or if you get rid of that background-size: cover; declaration you can set the height to 100%

Casey Clayton
Casey Clayton
16,708 Points

Yes I did this thank you! I actually changed it to contain rather than cover, as cover would clip it unless it was at exactly the right height, where as contain scales it accordingly. Thanks so much for the help!