Как адаптировать фоновое изображение

Question

.header {
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 100px;
}
.about_carbonex {
    position: relative;
    background-image: url(../img/about_carbonex/about_carbonex.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-width: 100vw;
    min-height: 90vh;
}

] Понимаю что скорее всего неправильно задаю высоту обоих блоков, но по другому не знаю как сделать

Answer 1

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  height: 100px;
  text-align: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  border: 3px solid red;
  z-index: 2;
  box-sizing: border-box;
}

.first-block {
  width: 100vw;
  height: calc(100vh - 100px);
  margin-top: 100px;
  background-image: url(https://shutterstock--c.na60.content.force.com/servlet/servlet.ImageServer?id=0150c0000049g7B&oid=00D30000001GgSC&lastMod=1501874864000);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

<body class="aa">
  <header>header</header>
  <main>
    <div class="first-block"></div>
  </main>
</body>

Answer 2

Пример

:root {
  --header-height: 100px;
}

body {
  margin: 0;
}

header {
  height: var(--header-height);
  text-align: center;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: rgba(255,255,255,.9);
}

.hero {
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  background: #555 url(https://placeimg.com/1000/1000/arch) no-repeat center top / cover;
}

.about {
  min-height: 100vh;
  background-color: #000;
}

<header>header</header>
<section class="hero"></section>
<section class="about"></section>

БЛОГ НА HUSL

Как адаптировать фоновое изображение

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