Задать вопрос
morozota
@morozota
html

Как правильно сделать фон из несколько картинок?

На psd (из интернета), header состоит из:
цвета фона и двух картинок лежащих друг на друге.

как сделал я:
HTML:
<body>
  <header>
    <div class="img"></div>
    <div class="img-two"></div>
    <div class="main">
      
    </div>
  </header>
</body>


CSS:
header{
  display: flex;
  background-color: #0e1a35;
  height: 100vh;
  border: 1px solid red;
}
.img {
  margin-top: 200px;
  position: absolute;
  top: 0;left: 0;
  width: 100%;
  height: 50vh;
  background: url(img/graph.png) no-repeat center;
  background-size: cover;
}
.img-two {
  margin-top: 83px;
  position: relative;
  width: 100%;
  height: 70%;
  background: url(img/grid.png) center;
  background-size: cover;
}


У меня плохое понимание о позиционирование. Скажи пожалуйста, как лучше сделать и где я ошибся
  • Вопрос задан
  • 471 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
1. Фон бывает множественным, фоны пишутся через запятую, последний самый нижний. Цвет пишется к нижнему фону.
Совершенно незачем городить несколько блоков ради этого.

2. Что мешает объединить в одну картинку 2 слоя?

Большего без макета не сказать.

Ну а ошиблись:
1. Фон header'a нужно задавать header'у, а не куче блоков.
2. Кроме позиционирования блоков есть позиционирование непосредственно фонового изображения background-position.
3. position: absolute для .img будет позиционировать блок относительно body, а у вас речь вроде про вертску header
4. .main внутри header выглядит странновато.
5. header display:flex чтобы что?
6. position: relative у .img-two чтобы что?
7. top: 0 и margin-top: 83px - почему не написать в 1 строчку top:83px
Ответ написан
5 комментариев
5 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать нейросеть
02 мая 2024, в 06:11
30000 руб./за проект
Автоматизация отчетности сектора подбора и развития персонала в 1С
02 мая 2024, в 05:49
7000 руб./за проект
Изменение темы сайта на ghost cms
02 мая 2024, в 04:47
5000 руб./за проект
Ещё заказы