I'm definitely not an experienced designer, so humble apologies for the inconvenience BUT I am having trouble overriding a header I created for a website. In the style-sheet it looks like this (basically for a header up top that goes semi-across the page). And I want to override the default "background" image for each page.

The CSS looks like this:


#header h2 {
float: right;
width: 530px;
height: 86px;
margin: 0;
background: url(img03.jpg) no-repeat;
padding: 84px 20px 0 0;
text-align: right;

And the html looks like this:

<div id="header">
<h1><a href="#"></a></h1>
</div>
<!-- end #header -->

I've tried a zillion things already -- changing the img src, using the !important tag -- so could someone explain how I do this, step-by-step, for a novice? Thanks a million.

Just put

<style type="text/css">
#header h2 {
background: url(imagepath_for_page.jpg) no-repeat;
}
</style>

in every page that needs it