Z
z
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;
}
The HTML:
<div id="gif2header">
<h1>The Header Title</h1>
<img src="quote.gif" alt="">
</div>
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;
}
The HTML:
<div id="gif2header">
<h1>The Header Title</h1>
<img src="quote.gif" alt="">
</div>