CSS Forum

**jason_bristol** · 08-04-2006, 09:05 AM

hello all.
This is probably a really stupid question. but I wanted a back ground to my site shown on the below link to my site (The yellow back ground). So I added this code (below) to an external style sheet and it worked.

body {
background-image: url(images/aaabackgroundforweb.jpg);
}

But I want a diferent background for a different part of my site . How do I use this method to have two different backgrounds. I thought of just doing something like -

bodytwo {
background-image: url(different image);
}

And use this in the external style sheet but where on the individual page do I change the code to direct it to bodytwo?

thanks for any help

**gringo** · 08-04-2006, 09:38 AM

You could differentiate the 2 styles by using <body id="style1"> on one page and <body id="style2"> on another page in your html and then use

HTML Code:

#style1 {background-image: url(blah.jpg);}
#style2 {background-image: url(blahblah.jpg);}

**funkdaddu** · 08-04-2006, 10:21 AM

Another way is to create an internal stylesheet with the same name, which will override the external sheet.

Code:

		<style type="text/css" media="screen"><!--
@import url("main.css");

body {
	background-image: url("newbg.jpg");
}
--></style>

If it's for more than 1 page, you can also just load another stylesheet for those pages (loaded after the main stylesheet) with the same selector and it should override the earlier one.

Code:

@import url("main.css");
@import url("section.css");

**jason_bristol** · 10:45 AM

thankyou. I'm trying thoughs now. 'funkdaddu' you have given me an idea to duplicate my external sheets and just change the body style on them and then change the linked style sheet for each page i want to change. I think that will work. thanks.
but can I just add another quick small question?....................(OK) thanks.

Is there anyway to use two backgrounds. I want a repeating image for a background y and x. Then I want another repeating images thats just repeats horizontical (x) along the top. The horizontical image will blend into the other background image.

**gringo** · 08-04-2006, 11:02 AM

Could you have the background that repeats x and y specified for <body> but then have the background that repeats only for x specified for a <div>?

**funkdaddu** · 12:11 PM

Quote:

Originally Posted by jason_bristol

'funkdaddu' you have given me an idea to duplicate my external sheets and just change the body style on them and then change the linked style sheet for each page i want to change. I think that will work. thanks.

Why duplicate a stylesheet when you can just add one, tiny stylesheet? If you change a style in your main one, you'll have to make that change in your duped one as well. It's a huge pain (I've made that mistake in the past with print styles). CSS is called Cascading stylesheets for a reason. There's a hierarchy that allows you to override other styles. So why make more work for yourself?

If you want only 1 stylesheet for everything, then gringo's suggestion is the way to go. Name all your pages's body with an id or class, then create a style for each.

Code:

#main {
background-image: url("mainbg.jpg");
}

#contact {
background-image: url("contactbg.jpg");
}

#aboutus {
background-image: url("aboutusbg.jpg");
}

etc...

And the benefit of that way is you can use that to specify other styles, like if you wanted all of the links on your contact page to be underlined, and not on the others:

Code:

#contact a{
text-decoration: underline;
}

And as for the 2 backgrounds, I think I did something similar to what you were talking about with gringo's method here: Student Transportation of America - check the source, I used a BODY background and a DIV called "bg".

**jason_bristol** · 08:32 PM

Thanks for that bit of follow-up advice. you are right. I did'nt quite understand what to do earlier. but now I do. That way is much better. I'll remember that for my next site.

As for the <div> in the background. I can't do it that way because my site is made up of tables. Unless there is a way to make the 'div wrap' go behind the tables. I don't think there is.

EDIT - sorry i can wrap div tags around tables. I didn't know that. The only way I found I can add this image at the top is to add the tables into a layer. center the table in the layer. Use absolute postioning on this layer with left: 0px; top: 0px and width: 100% Then add a horizontal background across the top of this layer. It works so far.