CSS background-image issue

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I'm trying to recreate a header image in proper HTML with an <h1> header.

The <h1> header is of variable length, but should cover the background image
(header.gif) which is just a straight fixed-length grey line like this:

The Header -------------------------------|

The width of "The Header" will change with the length of the text and with
the font size.  The line is a gif, so it shows through the text if it
overlaps, which looks bad.

Is there a way to cover up the background line with the <h1> so that it
doesn't show through the text?  The following HTML/CSS is just from my
first tests.  There must be a better way to do it.

The CSS:

#gif2header {
  width: 600px;

#gif2header h1 {
  font-size: 13px;
  color: #f60;
  background-color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  background-image: url('header.gif');
  background-repeat: no-repeat;
  margin-bottom: 0;


<div id="gif2header">
<h1>The Header Title</h1>
<img src="quote.gif" alt="">

Re: CSS background-image issue

Quoted text here. Click to load it
"http://www.w3.org/TR/html4/strict.dtd ">
<meta http-equiv="content-type" content=
"text/html; charset=windows-1252">
<style type="text/css">
#head {
background-image: url('http://files.photojerk.com/BootNic/border.gif');
background-position: center;
background-repeat: repeat-x;
border-right: 0.1em ridge #808080;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
width: 30em;
#head span {
background-color: #fff;
color: #f60;
<h1 id="head"><span>The Header Title</span></h1>

BootNic   Monday, November 06, 2006 10:58 AM

"I fought the Dharma, and the Dharma won."
*Allen Ginsberg*

Site Timeline