Блог

Мне сложно вставить фоновое изображение только на домашнюю страницу. У меня есть 6 страниц, но я хочу, чтобы на главной странице было только фоновое изображение. Досадно, что фоновое изображение есть на всех моих 6 страницах. Буду признателен за любую помощь, спасибо.

 header {
  background-image: url(img/markus-spiske-PIJwPMtzBI0-unsplash.jpg);
  background-size: cover;
  background-position: center;
  margin-top: 200px;
  height: 100vh; 
  background-attachment: fixed;
}
  

Это потому, что ваш тег заголовка в файле CSS всегда будет вызываться независимо от того, на какой странице он находится.

Чтобы решить эту проблему, вам нужно, так сказать, дать вашему заголовку дополнительное «имя». В этом случае достаточно присвоить ему «id».

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

Для полноты картины я добавлю это альтернативное решение.

Если это только для одного или двух исключений, вы также можете встроить код CSS на конкретную страницу, где вы хотите отобразить это изображение. Вот так:

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

Таким образом, вы можете продолжать использовать селектор заголовка для чего угодно, и только на этой конкретной странице заголовок будет использовать приведенный выше код CSS.