changing full page background image in sub pages

[polebu]

Hi,
I’m fairly new to html and css. I found the [perfect full page background image](https://css-tricks.com/perfect-full-page-background-image/ “perfect full page background image”) thread and I like it a lot and used it for a website.
I would like to change the background image for some of the sub-sites. But I don’t know how to do that?
Can I put the css code in to the html document, so that I can change it for every site? Is there a more elegant solution.
I tried to use two css files, one only for the background, the other for the rest of the page, that didn’t work either.

Thanks for your help.

[Paulie_D]

There are a couple of ways to do this depending on how you are creating the pages.

The simplest is to give each page `` a separate ID (or class if you want) and the address them separately in your CSS sheet.

Say you just had two pages Home & Contact

You would add an ID to each like `` and `` then in your CSS sheet you can put

body#home {
background-image: url(…123.jpg);
}

body#contact {
background-image: url(…XYZ.jpg);
}

I think you get the idea.

[polebu]

Thanks.
A follow up question. In the example the code is in the html section of the css and you put the img url in the body section. Is that ok, or does the complete code

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

go into the body section?

[Paulie_D]

Neither.

The only HTML that is needed is to add the ID to the `body` tag as shown above.

This..

body#home {
background-image: url(…123.jpg);
}

body#contact {
background-image: url(…XYZ.jpg);
}

…goes in your CSS file (ideally near the top).

[polebu]

Awesome. Works. Thanks a lot.
Just out of curiosity, the example of css-tricks shows it like this (code in the html selector):

html {

background: url(images/bg.jpg) ;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

But you put it in the body selector. What is the difference of these two? Why do both versions work?

[Paulie_D]

Either one works….basically the `` is the very first “element” of a webpage and the second one is ``.

If you want an overlay or even another image on top you can put the first on the HTML and add a second to the body.

[polebu]

Alright.
I haven’t found a good description of the html tag and what it does exactly. So far I only new it had to be there.
Thanks for your help.

[Paulie_D]

>The html element represents the root of an HTML document.

Technically it doesn’t’ do’ anything other than be a ‘wrapper’ for all of your HTML code.

[Author]

Posts