Changing background image for different pages in CSS

sirichmond

sirichmond

sirichmond

Associate
Joined
25 Apr 2007
Posts
139
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
 
Can't you just create a new CSS page for each of those but instead of it being a copy of the full original, just include the line with the background in it. So it'll only be a small file with the "body{background:/mynewbg.jpg}" line in it

If you then include your normal CSS page into the HTML and then add your specific background one the line after it should override the original one. This keeps all your normal formatting in one file as normal, but allows you to change individual pages where necessary.
 
You could just have a unique class for each page

Code: 
<body>
  <div id="wrapper" class="gallery-x">
  </div>
</body>

Code: 
#wrapper {
  /*this is your default bg for index, diary, links etc */
  background: url("...");
}

/* these are the overrides */
#wrapper.gallery1 {
  background: url("...");
}

#wrapper.gallery2 {
  background: url("...");
}

#wrapper.gallery3 {
  background: url("...");
}

etc....

Thats the whole point of CSS. You cascade and group similar styles, but you can override styles as and when needed.
 
Last edited:
Pretty much as I have outlined above :p

So your html for each page will look something like....

HTML:
Code: 
<body>
  <div id="wrapper">
  <div>
</body>

CSS:
Code: 
  #wrapper {
     background:  url("../images/default.jpg");
  }

... where the <div> with an id wrapper will have your default bg image

if you would like a different bg image on your gallery pages then you can either choose a different id

HTML different ID:
Code: 
<body>
  <div id="wrapper-gallery-1">
  <div>
</body>

CSS different ID:
Code: 
  #wrapper {
     background:  url("../images/default.jpg");
  }
  #wrapper-gallery-1 {
    background: url("../images/gallery1.jpg");  
  }

OR add a class and override the style

HTML different class:
Code: 
<body>
  <div id="wrapper" class="gallery-1">
  <div>
</body>

CSS different ID:
Code: 
  #wrapper {
     background:  url("../images/default.jpg");
  }
  #wrapper.gallery-1 {
    background: url("../images/gallery1.jpg");  
  }
 
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
 
almost.

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

I wont get into you putting a bg image on the body tag! :p
 
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;
}
 
You must log in or register to reply here.
Back
Top Bottom