Фоновое изображение автоматически меняет размер

Question

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

html css background-image

2

Mitrixsen 15 Янв 2021 в 09:29

Answer 1

Я думаю, ты можешь так поступить.

.post-header {
    background-color: #20cfcf;
    background-image:
    url("../img2/header_background.png");
    background-size: cover;
    background-position: center center;
    height: 582px;
    text-align: center;
}

2

George 15 Янв 2021 в 06:56

Answer 2

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

В этом решении мы создаем контейнер .hero и помещаем в него все, что должно быть на синем фоне. Мы позиционируем изображения абсолютно, снизу, трансформируя стрелку вниз на 50%.

Если у вас возникнут проблемы с жестко заданной высотой из другого ответа, это сработает для вас.

.hero {
  background-color: #20cfcf;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px 0 200px;
  position: relative;
  text-align: center;
}

.preheading {
  font-size: 1.7em;
  font-weight: 800;
  text-transform: uppercase;
}

.heading {
  color: #fff;
  font-size: 92pt;
  font-weight: 900;
  text-transform: uppercase;
}

.people {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

img {
 border: 1px solid black;
}

<div class="hero">
  <div class="preheading">Hi. We're Tilde.</div>
  <div class="heading">We live and<br>breate code.</div>
  <img class="people" src="https://via.placeholder.com/400x300">
  <img class="arrow" src="https://via.placeholder.com/200x80">
</div>

1

camaulay 15 Янв 2021 в 07:08

Фоновое изображение автоматически меняет размер

2 ответа

Новые вопросы

html