Question

Hopefully the good people at Stackoverflow can help me today – I basically drank far too much beer last night watching the football and my brain has stopped working.

I’m doing a responsive theme, 3 column layout with H2 tags at the top of each. I need to have a background image filling up the remaining space within the column. I’ve mocked up an image below to demonstrate what I’m on about;

If the background was a block colour I’d probably display the H2 inline and apply the background-colour to that as well, blocking out the image behind it on the containing div.

As you can see though, the mottled background means that technique doesn’t work very well, notice the obvious line above the text;

I’ve been trying all sorts – there must be some clever way of doing this and I hope you can help me!

Thanks for reading!

Robbie.

EDIT Ok, in the end I used a combination of the two answers below, but accepted the answer splitting the header tag into two divs and floating the first left (as I wouldn’t have thought of that). It didn’t work on it’s own, but by giving the left floated div a background the same height as the double lines and tiling it on the x-axis (rather than giving the whole element the background), I was able to cover up the lines under the text without it jarring with the background.

Image:

HTML:

<h2>
<div class="h2-text">Aha!!</div>
<div class="h2-lines">&nbsp;</div>
</h2>

And CSS;

.h2-text {
   padding-right: 5px;
   background: url(../images/footer-lines-overlay.png) repeat-x 0 20px;
   float: left;
}

.h2-lines{
   background: url(../images/footer-h2-lines.png) repeat-x 0 20px;
}

Thanks very much!!

Answer 1

Overshot the Ballmer Peak, I see.

Anyway, one possible solution is to use floating elements:

<h2>
    <div style="float: left;">My Header Tag</div>
    <div style="background: whatever;">&nbsp;</div>
</h2>