Я делаю эффект "параллакса", но он не работает - PullRequest
Новая
       22

Я делаю эффект "параллакса", но он не работает

0 голосов
/ 17 февраля 2020

Я вроде как новичок в HTML и CSS и создаю веб-сайт, но я не могу создать эффект параллекса на моем изображении ... Изображение просто нет показывая. Вы видите, что не так с моим (просто) кодом? 

.parallax {
  background-image: url("images/start-background.jpg");
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="parallax"></div>
  <h1 class="title-home">This is my title</h1>
  <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2>
  <div class="parallax"></div>
</body>

</html>

1 Ответ

0 голосов
/ 17 февраля 2020

Вы должны установить min-height. Я сделал 500px здесь, но вы можете изменить. 

.parallax {
  /* The image used */
  background-image: url("https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/weather/cloud/cumulus-cloud.jpg");
  min-height: 500px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<!DOCTYPE html>
<html>

<head>
  <link href="./style.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="parallax"></div>
  <h1 class="title-home">This is my title</h1>
  <h2 class="subtitle-home">This is my subtitle. Example, example, etc.</h2>
  <div class="parallax"></div>
</body>

</html>
...