Пропадает фоновое изображение при уменьшении масштаба

Question

Верстаю резиновый+адаптивный сайт. В качестве фона установлена картинка в одном из флекс элементов.

При уменьшении масштаба было все нормально, но после появления медиа запроса max-width 800px { flex-direction: column }, когда масштаб становится меньше 800px, картинка исчезает.

Пыталась менять размер дива с фоном, не понимаю куда пропадает?

@font-face {
  font-family: "Roboto";
  font-style: normal;
  src: Local("Roboto Regular"), url("roboto.woff");
}

html,
body {
  margin: 0;
  padding: 15px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  background-color: rgb(255, 255, 255);
  overflow: hidden;
  height: 100%;
}

header {
  background: rgb(81, 189, 190);
  height: 92%;
  box-shadow: 0 0 10px 8px darkgray;
}

.wrapper {
  height: 101%;
}

ul {
  display: flex;
  list-style-type: none;
  padding-left: 20%;
  margin: 0;
}

a {
  text-decoration: none;
  color: rgb(222, 230, 200);
}

.container {
  background-color: rgb(141, 85, 106);
  min-height: 90%;
  display: flex;
}

p {
  font-size: 42px;
}

.slogan {
  background-color: rgb(187, 118, 127);
  padding: 0 20% 0 20%;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: rgb(238, 213, 213);
  display: flex;
  justify-content: center;
  align-items: center;
}

.bg-img {
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right;
}

.links {
  background-color: rgb(81, 189, 190);
  width: 70%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.login {
  margin-left: auto;
  padding: 2% 4% 2% 2%;
}

@media screen and (max-width: 800px) {
  .container {
    flex-direction: column;
  }
  .slogan {
    width: 60%;
  }
  .bg-img {
    order: -1;
    height: 30%;
    width: 30%;
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ecofil</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header class="main-head">
    <div class="wrapper">
      <nav class="menu">
        <ul class="list">
          <div class="links">
            <li><a href="#shop">Товары</a></li>
            <Li><a href="#about">О нас</a></Li>
            <li>
              <a href="#shop"><img class="logo" src="" alt="">Woodln</a>
            </li>
            <li><a href="#blog">Блог</a></li>
            <li><a href="#contact">Контакты</a></li>
          </div>
          <div class="login">
            <li class="Login"><a href="#login">Log In</a></li>
          </div>
        </ul>
      </nav>
      <div class="container">
        <div class="slogan">
          <p>with love for EVER</p>
        </div>
        <div class="bg-img" style="background-image: url(img/basket.jpg);">
        </div>
      </div>
      <div>
  </header>
</body>

</html>

Answer 1

Дело не в flex-direction: column. У Вас в медиазапросе задаётся высота для блока с картинкой - 30%. Но высота в процентах не работает, и блок схлопывается. Потому картинка пропадает (на самом деле не пропадает, просто её не видно).

Задавайте высоту для bg-img в px или vh.

БЛОГ НА HUSL

Пропадает фоновое изображение при уменьшении масштаба

Ответы (1 шт):