Forums

guysoul

Hi experts,

I have three css files (main.css, style81.css and style86.css) .

On main.css. i have this script

body { background-image: url(/gfx/style/81/css-files/background_new_02.gif); background-color: #ffffff; padding: 0px; margin: 0px;

On style81.css and style82.css, i have this script @import url(main.css);

The thing here, i want to use different background image on my child css..

how would I do that here?

Regards,

Ed

Paulie_D

I don't understand.

Do you mean that having set a background-image on your body you want to change it for all pages or are those stylesheets 81/86 specific to individual pages.

guysoul

sorry for the confusion.

stylesheets 81 and 86 specific to individual pages. and they have different bg images.

Paulie_D

In that case, as long as you import the 'main' sheet first then anything you type after that will take effect.

Just declare a new bg image for the body.

If that is the only change you are making (or there are only a few) then you might just want to give those individual pages a special body class or ID and just target them in your main CSS file.

JohnMotylJr

@guysoul,

Exactly what Paulie_D is saying. You can simply add a class or id to the body/html tag of your .html / .php files and include the style in your main stylesheet. Are you attempting to do anything dynamic by loading different stylesheets?

index.html

< body>< /body>

page1.html

< body class="style81">< /body>

page2.html

< body class="style86">< /body>

main.css

body {
  background:#BADA55;
}

body.style81 {
  background:url(path/to/image_1.png);
}

body.style86 {
  background:url(path/to/image_2.png);
}

Obviously you would want to name your class a little more semantically.

treehouse : what would you like to learn today?

Forums

calling another css file