Help with background images in css

aaronjonmartin · Jun 16, 2004

Hi,

Hope you guys can help with this one.

I have a css positioned site which has a couple of divs with background images. What i want to do however is on different pages have different images as the backgrounds of these divs. Now the temporary way i have done this is to have a separate css file for each page with the different images set as the backgrounds however this is a poor solution and defeats the object of having a css file to maintain page style/layout from one file. Is there anyway i can define in the code for each page the background images to be used in certain divs? This would allow all of the syling and positioning to be done with the one css file and the different images to be used as the backgrounds for the divs i want changing.

Any help with this would be greatly appreciated.

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)

aaronjonmartin · Jun 16, 2004

Problem solved, thanks anyway guys.

I figured out that if you do inline style declarations they override the linked stylesheet so i have done it that way.

"It's so much easier to suggest solutions when you don't know too much about the problem."
Malcolm Forbes (1919 - 1990)

ChrisHunt · Jun 16, 2004

Do you want a different background on every page of your site, or do you want to have each background used on several pages? It doesn't make much technical difference, but does influence what is the best approach.

If every page has it's own background(s), there's no real point in specifying them centrally - you have to maintain two files for every page, and the end-user will have to download CSS rules for all pages, whether they visit them or not. That doesn't mean you have to write a seperate CSS file for each page, just redefine the particular style in the <head> of your document.

For example, suppose you want to apply a distinctive background to <div id="sidebar"> on every page. You'd define all the positioning properties and a default background in your main CSS file. In the <head> of each page you'd put something like:

Code:

<style type="text/css">
#sidebar {
   background:url(/images/thispageback.gif);
}
</style>

On the other hand, if you want to use different backgrounds to define different sections of your site, so many pages will use the same images, then you should put all the rules in your main CSS file to allow future flexibility. My suggestion would be to give your <body> tag a class to indicate the type of page. For example, if part of your site is a blog, those pages should have

Code:

<body class="blog">

Then you can pick out the particular images to use in your main file thus:

Code:

#sidebar {
   /* positioning and other rules here! */
   background: url(/images/default.gif);
}

body.blog #sidebar {
   background: url(/images/blog.gif);
}

body.forum #sidebar {
   background: url(/images/forum.gif);
}

/* ... etc ... */

Of course you could put the class in the <div> in question instead if you prefer.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Help with background images in css

aaronjonmartin

Technical User

aaronjonmartin

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor