Announcement

**resdog** · Aug 23, 2011, 08:17 AM

The website has no idea that you are on different pages, so really the only way to adjust this is to have an additional css call (which you do not want to do), or you can dynamically assign the background url with php (if you're using php).

You could also set an outer container div to act as your background, and give it a different ID on each page, and then in your one css file add a background to each div.

**Rowsdower!** · Aug 23, 2011, 08:42 AM

All you need to do is use a different class or ID for the <body> tag on each page that you want to have use a non-default background image. You can use ASP or PHP to automate that task if needed.

Then just add the appropriate lines of CSS to your single CSS file and you're done (body classes used for example here):

Code:

body{
	background: #fff url('image/header.png') repeat-x;
	color: #333333;
	font-size: 13px;
}
body[ICODE].page_1[/ICODE]{
	background-image:url('image/another_header.png');
}
body[ICODE].page_2[/ICODE]{
	background-image:url('image/yet_another_header.png');
}

This is similar to resdog's second suggestion but without the bloat of extra markup and without the complication of page height management and/or absolute positioning problems, etc.

Announcement

Multiple background images . . .

Multiple background images . . .

Comment

Comment