CODEWITHSUNDEEP
csscss-selectorsbackground-image
root337
root337

Reputation: 35

how to have body background image only on landing page

I've created a second page of my website and my first page is simply a landing page with the background image. However, when i go onto the second page I created, the background image i use on my landing page is also shown on that page which I do not want there.

Here is my CSS code:

body {
background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
background-size: cover;
background-position: center;
font-family: 'Lato';
color: white;
}

Note: I've also tried background-repeat: no-repeat; but it did not work.

Upvotes: 1

Views: 3444

Answers (2)

Johannes
Johannes

Reputation: 67758

Apply a class to your landing page's body element and change your CSS rule and selector/s to only select body with that particular class.

HTML for the landing page would be

<body class="mylandingpage">
   ....

For other pages: <body> without a class (or with another class)

And the CSS:

body {
 background: none;
 font-family: 'Lato';
 color: white;
}

body.mylandingpage {
 background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
 background-size: cover;
 background-position: center;
}

(color might also be specific to the landing page, I don't know...)

Upvotes: 3

Ben Johnson
Ben Johnson

Reputation: 358

You need to create a separate div class for your background as the body tag will always get called for all of your pages. Use some thing like this, try and only assign things to the body that you will want across all pages.

<div class="background">

....

Then add your CSS to this class

//CSS file 
.background {
background: url(https://images.unsplash.com/photo-1484417894907-623942c8ee29?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1489&q=80);
background-size: cover;
background-position: center;
}

Hope this helps.

Upvotes: 2

Related Questions