I have the following rule for a static BG image and other attributes for the entire site:
	width: 1014px;
	margin: 0 auto;
	height: 274px;
	background: url(images/imagename.JPG) no-repeat top;
However, this no longer works for me. What I need to do is to include a different background image for the header in each page. What CSS rule would I use to create this? 



Recommended Answers

All 4 Replies

You could place a class on either a wrapper that goes around the header or on the body and then just specify the background or background-position (if using a sprite use position) for each of the sites. The #header code would be your base case and then you would specify additional pages via

.page1 #header
 background: url(images/imagename2.JPG) no-repeat top;
Hello Scrappedcola,

Thanks and sorry for the late reply.  Humm.. I have yet to use a wrapper or at least don't remember if I've used one.  
Do you mean something like this for ei:
<div class="wrapper">contents of page</div>
The CSS:
div.wrapper {
        width: 1040px;
	margin: 0 auto;
	height: 234px;


One thing I am confused with is, do I use a wrapper along with the #header rule as well?  
All I need is a different image in one page and the rest could be static on a small website of about 10 pages.  
Also when you say .page1 would I actually say:

.testimonials #header

background: url(images/imagename2.JPG) no-repeat top;


Thanks so much for clarifying.

Your div.wrapper above is the general idea. Then to specify the particular page you would give that wrapper a specific id (could also add a class name to the body element which specifies the page you are on as well).

Then you would have the default behavior using the #header definition and when you had a particular page that needed a specific background you would use the id in the wrapper to add specificity to a new css rule that would override the default behavior in the #header css definition. The wrapper doesn't need any specific css but if you want it just around the header what you have would work. The only thing the wrapper is for is to act as an indicator to the css as to what page you are on.

The css definition you have for .testimonials would work if you set the wrapper to have a class of testimonials (though for that one particular page you could set a class of testimonials on the body element and it would be less html and work just as well).

Use a general style sheet, plus a style list for each page. Put the url in the page's own style list.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.