0

В этом макете верхняя часть с background из двух фото, как их склеить ? нужно чтобы была адаптивность и они не растягивались на маленьком экране
введите сюда описание изображения введите сюда описание изображения

.blockimg{
	background: url("img/d2.png"),
	url("img/1d.png");
	position: relative;
	background-position:left -20px, right;
	background-repeat: no-repeat;
	background-color: #444;
	background-size: 1049px 1001px , 903px 1043px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	

	box-sizing: border-box;
    padding: 25px;
	width:100%;
	min-height: 1043px;
	border-style: solid;
border-color: #cacd58;
border-width: 1px;
}

4
  • не совсем понятно как должно выглядеть
    – Skywave
    16 июл 2019 в 4:23
  • как на макете должно выглядеть
    – Anrisssss
    16 июл 2019 в 4:26
  • макет - это первая картинка или вторая?
    – Skywave
    16 июл 2019 в 4:27
  • конечно первая. вторая это то что у меня сейчас получается, при уменьшении в браузере до 30%, потому что на 100% первое фото перекрывает второе
    – Anrisssss
    16 июл 2019 в 4:28

1 ответ 1

0

Как вариант, использовать псевдоэлементы у body, сделать им абсолютное позиционирование, ширину в половину экрана и разные фоны.

body {
  margin: 0;
  height: 200vh;
}

body::before,
body::after {
  content: '';
  display: block;
  width: 50vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: 1;
}

body::before {
  background-image: url('https://cdn.trinixy.ru/pics3/20080124/podb/6/krasota_01.jpg');
  left: 0;
  height: 100vh;
}

body::after {
  background-image: url('https://kolyan.net/uploads/posts/2012-11/thumbs/1353432941_best-full-hd-wallpapers-32-39.jpg');
  right: 0;
  height: 105vh;
}

body > * {
  z-index: 2;
  position: relative;
}

h1 {
  width: 100%;
  text-align: center;
  margin-top: 20vh;
}
<h1>Example</h1>


Но я бы сделал единую картинку, по той причине, что она загрузится быстрее.

body {
  margin: 0;
  padding: 0;
}

body::before {
  content: '';
  display: block;
  width: 100%;
  height: 105vh;
  background: #444 url('https://i.imgur.com/r61XFBx.png') no-repeat top center / cover;
  position: absolute;
  left: 0; top: 0; right: 0;
  z-index: 0;
}

4
  • в первом варианте можно сделать затемнение как на макете ?
    – Anrisssss
    16 июл 2019 в 15:35
  • @Anrisssss, через что делается? Если через filter, то да.
    – De.Minov
    16 июл 2019 в 17:19
  • я вот так сделал, но в старом эксплоллере не работает к сожалению body::after { background-image: url("img/1d.png"); right: 0; height: 105vh; background-color: rgba(0, 0, 0, 0.719); background-blend-mode: darken; color: white; }
    – Anrisssss
    16 июл 2019 в 17:26
  • @Anrisssss, ie надо отправлять на помойку, он даже "новый" не умеет работать с background-blend-mode. Проще это затемнение в графическом редакторе сделать, тогда будет работать.
    – De.Minov
    16 июл 2019 в 17:31

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.