Changing background image for different pages in CSS

sirichmond · 16 Jun 2011 at 16:51

Afternoon all,

Further to my development of CSS I have another problem that google is confusing me with.

Basically the main pages of my site (index, gallery, diary, links etc) will use the same background which is stated in the CSS, but in 2 sections of my site I want to have a different background image for each page. So in the gallery section each gallery page of photos will have a different background which will be a pic from that set of photos. How do I achieve this is CSS?

Thanks Again
Simon

sirichmond · 16 Jun 2011 at 17:25

Yeah just been looking at using classes, how do I implement this into my html and css not a 100% sure as not used any classes yet.

sirichmond · 16 Jun 2011 at 17:39

So is this the correct way to implement it in CSS?

body {
background-image:url(images/backgrounds/0511.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-color:#000000;
font-family: Trebuchet MS, Verdana, Arial, Times New Roman, Courier;
font-size: 12px;
color: #FFFFFF;
}
#wrapper.gallery1 { background:url(images/backgrounds/121209.jpg);}

Thanks

sirichmond · 16 Jun 2011 at 18:31

Think I'm getting somehwere, only problem I have now is before my image used to show fully no matter how much content was on the page, its 1280x1024 in size, now it only shows as far as the content goes down the page, any way to fix this?

body {
background-color:#000000;
font-family: Trebuchet MS, Verdana, Arial, Times New Roman, Courier;
font-size: 12px;
color: #FFFFFF;
}
#body {
background:url(images/backgrounds/bkg1.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center;
}
#body.gallery1 {
background:url(images/backgrounds/121209.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:center;
}