"push up" background above content with dynamic height - html

Question

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:
What I want:
#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 1

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;
background-size: 0%;
}
#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>

Answer 2

#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 {
background-image: none;
height: auto;
}
#content {
position: relative;
width: 100%;
margin-left: 0px;
}
#content:before{
content: '';
display: block;
background-image: url("http://i.imgur.com/u4xZlez.png");
background-repeat: no-repeat;
background-size: 100%;
padding-bottom: 61.54%; /* 400/650 */
}
}
<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 3

#container{
background-image:url("http://i.imgur.com/u4xZlez.png");
background-size:100%;
background-position: 0 -110px;
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>
Try using the background-position CSS property, which accepts px as well as % measurements. You will need to put it in a media query so it only applies on screens > 650px but I will leave that for you to do.

Answer 4

Here it is...
But image is no longer background.
#container {
overflow:hidden; /* if desired */
height:400px;
display:block;
position:relative;
width:100%;
max-width:650px;
border:1px solid red;
}
#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;
}
/* This... */
#content img {
width:100%;
position:absolute;
bottom:100%;
}
}
<div id="container">
<div id="content">
<img src="http://i.imgur.com/u4xZlez.png" />
<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>