Как сделать этот фоновый рисунок отзывчивым

Question

Я пытаюсь сделать мой "Icon_POS_bitmap.png" отзывчивым. Если я смотрю веб-сайт на ноутбуке, изображение обрезается внизу. Я знаю, что не могу поставить .hero-slides .single-hero-slides на фиксированную высоту 1000 пикселей. Но height: 100%; and height: auto;, похоже, не работает.

Когда я пытаюсь установить параметры на авто или 100%, изображение исчезает, а следующий div "sonar-project-areas" идет вверху.

HTML

<section class="hero-area">
  <div class="hero-slides">
    <!-- Single Hero Slide -->
    <div class="single-hero-slide bg-img slide-background-overlay" style="background-image: url(img/bg-img/Icon_POS_bitmap.png);">
    </div>
  </div>
</section>

CSS

.hero-slides .single-hero-slide {
    height: 1000px;
    width: 100%;
    position: relative;
    z-index: 1;
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    overflow: visible;
    /*cursor: pointer; */
}

.hero-slides .single-hero-slide .hero-slides-content {
    position: relative;
    z-index: 1;
    -webkit-transform: translateY(75%);
    transform: translateY(75%);
    -webkit-transition-duration: 800ms;
    transition-duration: 800ms;
    bottom: 0;
}

.hero-slides .single-hero-slide .hero-slides-content .line {
    width: 100px;
    height: 1px;
    background-color: #ffffff;
    margin-bottom: 30px;
    display: block;
}

.hero-slides .single-hero-slide .hero-slides-content h2 {
    color: #ffffff;
    font-weight: 100;
}

.hero-slides .single-hero-slide .hero-slides-content p {
    color: #ffffff;
    margin-bottom: 0;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    margin-top: 140px;
}

.hero-slides .single-hero-slide:hover .hero-slides-content {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.hero-slides .single-hero-slide:hover p {
    margin-top: 40px;
}

.bg-img {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-background-overlay {
    position: relative;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
}

.slide-background-overlay::after {
    content: '';
    position: absolute;
    height: 60%;
    width: 100%;
    z-index: -1;
    bottom: 0;
    left: 0;
}

Оригинальный шаблон, который я использую, таков: https://colorlib.com/wp/template/sonar/

Я изменяю это для своих нужд. Я использую html / css / js время от времени, но не могу найти проблему.

Привет Адриан

Answer 1

Это то, что вы пытаетесь сделать, я добавил height: 100vh в основной контейнер и переместил style="background: ...." внутри CSS в .bg-img. Я также добавил margin: 0; padding: 0 к телу

body {
  margin: 0;
  paddong: 0;
}

.hero-slides .single-hero-slide {
  height: 100vh;
  /* You can change this to 50vh (50% of the screen width) and will still be responsive */
  width: 100%;
  position: relative;
  z-index: 1;
  -webkit-transition-duration: 800ms;
  transition-duration: 800ms;
  overflow: visible;
  /*cursor: pointer; */
}

.hero-slides .single-hero-slide .hero-slides-content {
  position: relative;
  z-index: 1;
  -webkit-transform: translateY(75%);
  transform: translateY(75%);
  -webkit-transition-duration: 800ms;
  transition-duration: 800ms;
  bottom: 0;
}

.hero-slides .single-hero-slide .hero-slides-content .line {
  width: 100px;
  height: 1px;
  background-color: #ffffff;
  margin-bottom: 30px;
  display: block;
}

.hero-slides .single-hero-slide .hero-slides-content h2 {
  color: #ffffff;
  font-weight: 100;
}

.hero-slides .single-hero-slide .hero-slides-content p {
  color: #ffffff;
  margin-bottom: 0;
  -webkit-transition-duration: 500ms;
  transition-duration: 500ms;
  margin-top: 140px;
}

.hero-slides .single-hero-slide:hover .hero-slides-content {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.hero-slides .single-hero-slide:hover p {
  margin-top: 40px;
}

.bg-img {
  background-image: url("https://picsum.photos/5472/3648?image=1074");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.slide-background-overlay {
  position: relative;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
}

.slide-background-overlay::after {
  content: "";
  position: absolute;
  height: 60%;
  width: 100%;
  z-index: -1;
  bottom: 0;
  left: 0;
}

<section class="hero-area">
  <div class="hero-slides">
    <!-- Single Hero Slide -->
    <div class="single-hero-slide bg-img slide-background-overlay">
    </div>
  </div>
</section>

Answer 2

Вы, кажется, пытаетесь создать адаптивное фоновое изображение. Если это так, то ниже вы найдете быстрый совет, как это сделать.

---

Отзывчивый фон изображения:

1. Сначала мы создаем контейнер для фона, как вы сделали с <div class="single-hero-slide bg-img slide-background-overlay"></div>
2. Далее вы устанавливаете высоту и / или ширину с помощью width и height свойств CSS
3. После этого выберите изображение для использования в качестве фона и используйте background-size: cover или contain

.bg-img {
  width: 30vw;
  height: 100vh;
  background: url('https://images.pexels.com/photos/1034677/pexels-photo-1034677.jpeg?cs=srgb&dl=adult-art-man-1034677.jpg&fm=jpg');
  background-size: cover;
}

<div class="single-hero-slide bg-img slide-background-overlay"></div>

Вот ссылка на это имущество: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size