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


Brandon Stiles
Brandon Stiles
12,305 Points

How can I prevent a background image from 'collapsing' when scrolling?

I'm designing a Wordpress template (site), but I'm having some trouble.

Basically on every page there's a horizontal nav across the top (not fixed to the top), and right below is a 100%-width (usually about 20%vh tall) picture with some text over it. In order to put the text over it and have it be changeable, I set the picture container as a <div> and then added the image as a 'background-image' with CSS.

However, when I make the page smaller (testing for responsiveness), all the content below the picture collapses on it. See the pictures attached to understand what I mean.

How can I set it so the content below the big picture doesn't collapse on it when the window is made smaller? I've tried 'min-height', but it hasn't seemed to work.


<div id="introParagraph" class="m-b-2 p-y-2">  <!--- THE CONTAINER DIV -->
     <h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our <br> approach</h1>               
     <h3 class="text-xs-left col-md-3 col-md-offset-1 col-xs-6 m-t-1" id="question">How we         help you figure out what works for you and your business. <br><br> Click on the icons to learn more. </h3>                   


@media (min-width: 650px){  /* I set it under media-query because the picture is grey on a mobile device-- the picture only shows on bigger screens */

    background:  url("../img/approach.png");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 45%;

Here are pictures where you can see my 'collapsing-in' problem, and how I want it to look when it's resized: alt text

alt text

1 Answer

Max Weir
Max Weir
14,963 Points

Hi there,

I would use padding instead, by setting a height this will set the height regardless of what's inside the container. If you set padding top and bottom then you have better control of the visual height. So less on mobile and more on desktop for example.