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.

Solution

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...)