Change header image for each page of website

I am working with a CSS template:

I am wanting to change my header image for each page. I have read some information on how to do this and have come to conclusion that some PHP has to be used. I have found in the CSS behind my template the code the displays the current header image:

#header { float:left; width:880px; height:330px; background:url(../images/header.jpg); background-repeat:no-repeat; }

I have also found some code examples of how to change the image for each page:

<?php
if ($node->nid == 1) {
print 'image-1.jpg" />';
}elseif ($node->nid == 2){
print 'image-2.jpg" />';
}elseif ($node->nid == 3){
print 'image-3.jpg" />';
}elseif ($node->nid == 4){
print 'image-4.jpg" />';
}elseif ($node->nid == 5){
print 'image-5.jpg" />';
}elseif ($node->nid == 6){
print 'image-6.jpg" />';
}elseif ($node->nid == 7){
print 'image-7.jpg" />';
}elseif ($node->nid == 8) {
print 'image-8.jpg" />';
}elseif (($node->nid == 9) | ($node->nid == 10)){
print 'image-9.jpg" />';
}elseif ($node->nid == 11) {
print 'image-11.jpg" />';
}else {
print 'default-image.jpg" />';
}?>

I am struggling to work out how to integrate the PHP into the existing CSS.

Any help would be much appreciated. :thumbsup:

YOu will need to add a php include tag in the area where you want the header to apear! It should be done in the html not the CSS. here is a link to my portfolo http://www.hotstardesign.com (http://hotstardesign.com)

I am wanting to change my header image for each page. Little confusing as I could take it that you want a DIFFERENT header on every page. That can all be done with just CSS.

If you are wanting to put the SAME header image for every page that will not be changed, you can do that with CSS if you put the header image in as a background of a div container properly styled. Every page links to a common CSS file so it would appear on all pages as long as the header div is on every page.

If you you want to change the header image on every page from time to time, the I would suggest the use of PHP Includes. You can use the include codes for the HTML and/or the CSS file link. I would probably make a separate CSS if you are putting different header images on each page or planning on changing the header images from time to time.

I hope I got this written down right. LOL

How many pages do you have?

I have 20 pages in total. I am just wanting each page to have a different image. So include would be needed for this?

CSS would do it since all 20 pages should be linking to a common external style sheet already. The only file you would be editing is the CSS to change the heading image at any future date.

Includes just make it easier if you want to do something different with the header image as you still only edit one file...the include file which is referenced to by each include code on every page.

For yours, I would just do the CSS file. Two ways one of which involves adding another CSS file link and a CSS file for the header images only or just add all the header images CSS to the present CSS file.

If the header image container is a div and ALL header images are the same size and centered and not repeated, example:

CSS:


#header1, #header2, #header3, #header4, ... #header20 {
width: XXpx;
height: YYpx;
margin: 0 auto;
}

#header1 {
background: url(header_image1) no-repeat center scroll;
}

#header2 {
background: url(header_image2) no-repeat center scroll;
}
.
.
.
#header20 {
background: url(header_image20) no-repeat center scroll;
}



HTML:

<div id="headerZ"></div>

Z = page name or just a number in sequence as shown in CSS. The html will be placed where you want it and the corresponding id put in for the div.

If each header image has a different size and centered, then you will have to change those dimensions as well for each one:


#header1, #header2, #header3, #header4, ... #header20 {
margin: 0 auto;
}

#header1 {
width: XXpx;
height: YYpx;
background: url(header_image1) no-repeat center scroll;
}

#header2 {
width: XXpx;
height: YYpx;
background: url(header_image2) no-repeat center scroll;
}
.
.
.
#header20 {
width: XXpx;
height: YYpx;
background: url(header_image20) no-repeat center scroll;
}