CODEWITHSUNDEEP
htmlcss
user2189151
user2189151

Reputation: 47

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?

Upvotes: 1

Views: 8973

Answers (4)

Daniel Imms
Daniel Imms

Reputation: 50149

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>

Upvotes: 4

Xenolithic
Xenolithic

Reputation: 210

You could use a class instead of going directly for the html selector:

.blue
{
    background: blue;
}

then call it like so:

<html class="blue">

Upvotes: 1

Christopher Marshall
Christopher Marshall

Reputation: 10736

Add you class only to that index.html file for that site.

<html class="home-page">

html.home-page { 
   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;
   }

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Add internal style to index page, like below

<style>
 body { 
   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;
   }
</style>

And CSS file's body will apply to all other pages.

Upvotes: 0

Related Questions