I have a div that contains an <img>, a heading, and a paragraph. The <img> is float:left and the heading and paragraph flow around it. The problem is that the heading has a background-image associated with it but the background-image doesn't flow around the <img>. It gets hidden behind the <img>. Is this by design or am I missing something?

Here's my stripped down code that demonstrates my issue:

 <style>
* {
  margin: 0;
  padding: 0;
}

#wrapper {
  width: 600px;
  margin: 0 auto;
  border: 1px solid gray;
  padding: 10px;
}

#wrapper img {
  float: left;
  margin: 0 10px 5px 0;
}

#wrapper h1 {
  background-image: url(../images/item_bg.png);
  background-position: left top;
  background-repeat: no-repeat;
  padding-left: 10px;
  }

</style>

<body>

<div id="wrapper">
<img src="mypic.jpg">
<h1>My background image is behind my picture!</h1>
<p>blah blah blah...</p>

</div>
</body>
...
  • I meant float:left above in my code. It's changed now. Jeff Battle about 9 years ago

1 answer

Mottie 1134
0
points
This was chosen as the best answer

The background image is meant to be in the background. I think what you are trying to do is not have the background image behind your image?

Try this change in your CSS ( change the padding to margin, then adjust it to the width of the image + some padding )

#wrapper h1 {
  background-image: url(bg.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  margin-left: 120px;
}
Answered about 9 years ago by Mottie
  • That seemed to do it. I thought the background-image would just go where ever its element went. Thanks Jeff Battle about 9 years ago