I managed to get a header working, but the process was quite unsightly. Is there a more elegant approach to achieving this?
My goal is to have a continuous header with an image centered within it. Essentially, I need a repeating background image, with my desired image displayed in the center, and then another continuation of the repeated background. Additionally, I need a continuous line below the image. Below is the HTML code that I used, which I admit is not the most aesthetically pleasing:
<h1>
<div align="center">
<img src="designs/header12.png" align="center"/>
</div>
</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2></h2>
To position h2 correctly, I had to resort to using several <br/> tags. Here is how h1 and h2 are styled in the CSS:
h1 {
background:url('../designs/headerPiece.png');
height: 33px;
width:100%;
float:left;
}
h2 {
background:url('../designs/headerPiece.png');
height: 33px;
width:100%;
}
Any advice or suggestions would be greatly appreciated!