user2189151 user2189151 - 3 months ago 8
CSS Question

changing the background on just one web page

So I have the following css code which sets the background image to all my webpages

html {
background: url(../index/images/white.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}


My question is can I have a background image on one page lets say index.html and another background image for the rest of my pages?

Answer

You can do this is a variety of ways, an easy one is to give a class to a root element and style appropriately. FYI I'd use body instead of html for the background.

CSS

body { 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
body.home {
    background: url(../index/images/white.jpg) no-repeat center center fixed; 
}
body.product-list {
    background: url(../index/images/another-image.jpg) no-repeat center center fixed; 
}

index.htm

<body class="home">
    ...
</body>

productList.htm

<body class="product-list">
    ...
</body>