How do I add a background image to the home page only? - css

Question

I'm finding it difficult to insert my background image only on the home page. I have 6 pages but I only want the background image to be on the home page. Annoyingly the background image is on all of my 6 pages. Any help would be appreciated , thank you.
header {
background-image: url(img/markus-spiske-PIJwPMtzBI0-unsplash.jpg);
background-size: cover;
background-position: center;
margin-top: 200px;
height: 100vh;
background-attachment: fixed;
}

Answer 1

That is because your header tag in the CSS file will always get called on the no matter the page it is.
To solve this, you need to give your header an extra "name" so to speak. In this case giving it an "id" is enough.
#homepage-header{
background-image: url('path/to/image')
}
//As you can see here, instead of calling the <header> im now calling the #homepage-header
<header id="homepage-header">
</header>
//I added a unique ID to <header> tag allowing me to target this header specificly on the homepage.

Answer 2

For sake of completeness, I will add this alternative solution.
If this is just for one or two exceptions, you could also inline the CSS code on the specific page where you want this image to display. Like this:
<div></div> <!-- this is the image div -->
<style>
header {
background-image: url(img/markus-spiske-PIJwPMtzBI0-unsplash.jpg);
background-size: cover;
background-position: center;
margin-top: 200px;
height: 100vh;
background-attachment: fixed;
}
</style>
This way, you can keep using the header selector for whatever you want, and only on that specific page, the header will use the above CSS code.