Изображение героя за содержанием тела - PullRequest
Новая
       0

Изображение героя за содержанием тела

0 голосов
/ 04 июня 2018

По какой-то причине мой образ героя отстает от содержания моего тела.Как это исправить, чтобы изображение героя давило на мое тело.Я попытался z-index, но это не сработало (мои изображения героев имеют переменные авто-высоты). 

.hero .hero-bg, .hero {
    width: 100%;
    height: 100%;
}

.hero .hero-bg {
	background-image:url('http://via.placeholder.com/1000x300');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 80%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

html {
    width: 100%;
    height: 100%;
    color: red;
}

body {
    background-color: green;
}
<body>
<section class="hero">
<div class="hero-bg">
</div>
</section>
<section class="content">
<p> content - content - content - content - content - content - content - content - content - content - content - content - content</p>
</section>
</body>

1 Ответ

0 голосов
/ 04 июня 2018

Причина в том, что вы даете свое изображение position: absolute;, поэтому оно будет отставать от другого контента.

Я добавил дополнительный контент в HTML, чтобы было ясно, что остальное не перекрывает ваш.hero раздел: 

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  color: red;
}

body {
  background-color: green;
}

.hero,
.hero-bg,
.content {
  height: 100%;
}

.hero-bg {
  background-image: url('http://via.placeholder.com/1000x300');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 80%;
  opacity: 1;
}
<section class="hero">
  <div class="hero-bg"></div>
</section>

<section class="content">
  <div>Other content</div>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...