chiliNUT chiliNUT - 5 months ago 13
HTML Question

"push up" background above content with dynamic height

I have a div with a background image. Inside of that div is an absolutely positioned div with text in it. At widths>650, The text is a rectangle floating inside of the div. At widths<=650, the text is anchored to the bottom of the div with 100% width.

When this happens, it sits on top of the bottom of the background image. I would like the background image to get "pushed up" so that you can see the bottom of the background image. I could give a negative offset to the background position, but the height of the content is dynamic, because the text wraps to fit the width of the viewport, so I won't know the height, so specifying a specific offset/margin is not an option.

Is there any way to accomplish this in pure CSS with the design that I have? I would like to avoid javascript, and to avoid redesigning the layout of the HTML (e.g., *using an

<img>
instead of a
background-image*
)
.

Pictures describing the situation below, code below that:

What I have:
enter image description here

What I want:
enter image description here



#container{
background-image:url("http://i.imgur.com/u4xZlez.png");
background-size:100%;
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
background-repeat:no-repeat;
}
#content{
position:absolute;
top:10%;
display:block;
background-color:white;
width:60%;
margin-left:10%;
border:1px solid black;
}

@media(max-width:650px){
#content{
bottom:0px;
top:auto;
width:100%;
margin-left:0px;
}
}

<div id="container">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
</div>
</div>




Answer

In the media query, change the container display to flex.

Use justify content to move content to the bottom.

Add a pseudo, using order to move it to the beginning, ahead of content.

Set the background image of container to this pseudo instead, and align it to bottom

#container{
                background-image:url("http://i.imgur.com/u4xZlez.png");
                background-size:100%;
                height:400px;
                display:block;
                position:relative;
                width:100%;
                max-width:650px;
                border:1px solid red;
                background-repeat:no-repeat;
            }
            #content{
                position:absolute;
                top:10%;
                display:block;
                background-color:white;
                width:60%;
                margin-left:10%;
                border:1px solid black;
            }

   @media(max-width: 650px) {

    #container {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    #container::before {
        content: "";
/*        background-image: url("http://i.imgur.com/u4xZlez.png"); */
        background-image: inherit;
        background-size: 100%;
        background-position: center bottom;
        width: 100%;
        flex-grow: 1;
        order: 1;
    }

    #content {
        position: static;
        bottom: 10px;
        top: auto;
        width: 100%;
        margin-left: 0px;
        order: 2;
    }
}
<div id="container">
            <div id="content">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.</p>
            </div>
        </div>