CODEWITHSUNDEEP
cssimagebackground
Joseph Montecalvo
Joseph Montecalvo

Reputation: 129

Home Page background image different from other pages

I have a site with about 7 different pages. I'd like to have two different background images, one for the home page and another that will display on every other page. Does this require Javascript/Jquery or simple css?

As I show below, I set my body to display the background image on the six other pages. Then tried using css directly in my HTML index page and display a different background but it failed.

body {
font-family: Helvetica, Arial, sans-serif;  
background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Upvotes: 1

Views: 1612

Answers (2)

dweeves
dweeves

Reputation: 5605

You can specify a specific class for your body tag on each page.

Say on home:

  <body class="home">

And on each page 

 <body class="page-1">
 <body class="page-2">
 ....

Then your css could be separated into several rules that would match each body class, specialization

/* common body css */
body {
font-family: Helvetica, Arial, sans-serif;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
} 

/* specialized body for home */
body.home {
   background: url(images/hso-palmtree-background.jpg) no-repeat center center fixed; 
}

/* specialized body rules for page 1 */
body.page-1 {
   background: url(images/background-for-page-1.jpg) no-repeat center center fixed; 
}

and so on...

Upvotes: 2

Robert
Robert

Reputation: 2824

there alot of ways

make every body have an id or class

or add the background as html <style>background :imgurl</style>

Upvotes: -1

Related Questions