Сделать изображение размером с нижний колонтитул под обложкой - PullRequest
Новая
       124

Сделать изображение размером с нижний колонтитул под обложкой

0 голосов
/ 04 августа 2020

Я делаю веб-сайт и наткнулся на небольшую проблему. У меня есть изображение по высоте: 100% и ширине; and background-size: cover;

Есть ли способ сделать так, чтобы нижний колонтитул отображался ПОД изображением? 

.bg {
  /* The image used */
  background-image: url("./Resources/home_bg.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

HTML код выглядит так: 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="bg"></div>

  </body>

</html>

1 Ответ

2 голосов
/ 04 августа 2020

Похоже, вам нужно только добавить z-index к вашим div.

footer будет иметь меньшее число z-index, а .bg - большее.

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

.bg {
  /* The image used */
  background-image: url("http://placehold.it/400x400");

  /* Full height */
  height: 100vh;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index: 10;
}

footer {
  background: #ff0000;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 8;
 }
 
 .container {
 height: 105vh;
 }
<div class="container">
  <div class="bg">BG</div>
  <footer>footer</footer>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...