View Full Version : Need Help on Header Images

12-12-2011, 03:52 PM

Can anyone explain to me how to do the following:

I have 2 webpages (lets say an Index and Contact page);
Each page has a header, but I would like a different image in each header.

How do you do this with CSS? It's easy enough to add the background image in a css rule, but then that same image shows up in all the headers.

I am guessing you have to make a class for each image?

Can someone show me the code for how to do this?

Would be much appreciated.


12-12-2011, 04:21 PM
You will have to give on both pages the body tag an ID.
home page:

<body id="home">
contact page:

<body id="contact">
Now you can target your header specifically in your css like so:

#home #header {background-image: url(header-home.jpg)}

#contact #header {background-image: url(header-contact.jpg)}
How to give the body tag an ID in Design View... I don't know. Do a search here on the forum... There should be an old thread explaining how.

12-12-2011, 04:32 PM
Hi Gentleone,

Thanks. That works perfectly.

I know I could also just add the img src tag to the html and get the same result. But atleast with the CSS its a bit easier to change the image out.

Thanks Again