CSS Forum

**vampyrus** · 03-12-2008, 10:28 AM

I have a bunch of pages that I want to have different backgrounds but I want all of them to be governed by a single CSS ... Is it possible to have that single CSS relate multiple different backgrounds??

**LadynRed** · 03-12-2008, 01:09 PM

Yes, create classes for the different backgrounds, then add the different classes to the <body> of each page.

Why do you want to do that anyway, it disrupts the cohesive look to a site ?

**vampyrus** · 03-13-2008, 05:11 AM

I have a multitude of pages for different things and I want each page to have a background appropriate to it's topic .... I do not want to have to create 20 different style sheets or have to repeatedly add code to the html pages.

**Arenlor** · 03-13-2008, 05:51 AM

Do something like:

Code:

body#page_type_1{background-color:#FFFFFF;color:#000000;}
body#page_type_2{background-color:#000000;color:#FFFFFF;}

then use ids on the body tags of the given pages:

HTML Code:

<body id="page_type_1">

It is suggested that you don't do what you plan to do though, it's not good for keeping people at your site. If you really want to do something then just change the header of each page and leave the background etc alone.

**RadGH** · 03-13-2008, 07:52 AM

It's the designers decision, and responsibility whether or not he(or she) should do this. But yes, keep in mind the bandwidth of the site and don't make it annoying for visitors.

Besides, it wouldn't make a big difference if they are just small tiled patterns that change to match color schemes, or something like that.

You can also just keep the body { background:... code out of the global CSS, and make sectional CSS pages for each section. Example, say you have a section dedicated to home and garden. You can not only declare the background, but maybe change the logo, borders etc.

This is done on Photobucket which if you go during a holiday (like valentines day), where the background may be pink and there might be pink navigation menus etc. while the rest of the page is default.

**vampyrus** · 03-13-2008, 09:19 AM

Okay ... thanks muchly for the advice and help guys ... now in response to your answers ... first of all I'm not sure I like the idea of sectional CSS files as I feel it will bloat the cache where a single CSS will not .... The site I am creating is more for a specific set of ppl rather than just surfers and I am really not so worried about the cohesiveness of the look .... I want the pages to be different as they deal with different aspects and topics for the subject matter of my site.
I don't want to have to code 20 style sheets that are all going to have 75% of the same coding in them, which is the case since other than the actual text styles the only difference between the pages will be the backgrounds and the images.
And in response to Arenlor I know I can make those changes but I actually want different backgrounds but am not so worried about headers on the pages.

I hope all of that made sense lol ....

**LadynRed** · 03-13-2008, 03:30 PM

Quote:

I do not want to have to create 20 different style sheets

You don't NEED 20 different stylesheets, 1 will do.

Quote:

or have to repeatedly add code to the html pages.

Don't have to, if you put the classes on the <body> 1 time, you can change backgrounds any time you want by changing 1 file - the css file. You set up each class for each page type and you set the background in the class or ID as you want it. This is hardly a lot of work and allows you to change those backgrounds any time you want without always going back to the HTML.

**vampyrus** · 03-14-2008, 07:43 AM

That is all well and good and would work fine .... IF i was going to have a website where I had 20 pages but were only having 5 or 10 of them actually online at any given time .... but that is not the case ... my website is going to have a home page with 20 links to 20 different pages that will ALL be online at the same time .... so if I only include formatting for one background then they will all have the same background or they will all be broken except for the one that has the correct class id.

**LadynRed** · 03-14-2008, 03:43 PM

You are apparently not grasping what I'm telling you. What you describe is simply incorrect.

It does mean having 20 different classes that specify only the different background images. It does mean putting the class or ID specification on the <body> tag of each page. Why is that such a big deal ?? You set it up once and you're done - until you decide to change the background images for different pages, then you change JUST the CSS.

If you don't want to do the work the way I described it, then I can't help you with a solution, this is the simplest way to go without any scripting.

**vampyrus** · 09:05 AM

Lady .... I'm actually not arguing with you. Your solution is exactly what I was looking for. It was suggested by others that I should use html in the pages to define my backgrounds or just have the background the same for the entire site which goes against everything I have planned. I want to use a CSS because the only thing that will be different for each page of my site is the background and embedded images (where images are present).
I don't know about anyone else but I certainly don't see the sense in writing up coding for the exact same set of links and text styles 20 times. Does anyone else see my point.
I was arguing with Rad over the sense in using non global CSS sheets since the coding will be the same for each page except for minute differences.

**LadynRed** · 03-15-2008, 11:22 AM

Ok, sorry if I misunderstood your responses.

Quote:

I certainly don't see the sense in writing up coding for the exact same set of links and text styles 20 times.

As for that, it's not necessary. You can apply rules to multiple selectors all at the same time like this:

.hdrPg1, .hdrPg2, #headerPg1{rules here}

It works perfectly for what you want, and it's best used for the rules that will be common across all the listed selectors.

**vampyrus** · 03-15-2008, 11:50 AM

Not sure if I understand what you mean but it doesn't matter so much .... as I said before most everything except the backgrounds will remain the same anyway which is why I am trying to do everything in the one CSS.
I now understand how to work with the classes for the backgrounds and relate them to each page .... The pages will then just have images and links on them so it doesn't matter.

**LadynRed** · 03-15-2008, 12:18 PM

Good, glad you got it working

**vampyrus** · 08:32 PM

Quote:

.hdrPg1, .hdrPg2, #headerPg1{rules here}

Just wanted to clarify .... when u say rules ... are u talking about things like the font and style for text and the colour of it and stuff ?

thanks

**LadynRed** · 03-15-2008, 11:29 PM

Yes, anything in side the curly braces ie:

h1{
font-size: 1.5em;
font-weight: bold;
color: #ddd;
margin: 5px;
}

All those statements are the 'rules' applied to that selector.