Не могу задать правильно параметры для multiple background в ::before

Question

Необходимо сделать задний фон лендинга из трех картинок, которые при увеличении масштаба не разъезжались, а масштабировались под контейнер. Решила использовать ::before, в нем прописать

&::before {
content: "";
position: absolute;
background: url("../img/lending-bg-1.jpg") no-repeat left,
  url("../img/lending-bg-2.jpg") no-repeat center,
  url("../img/lending-bg-3.jpg") no-repeat right;
width: 100%;
height: 900px;
top: -85px;
z-index: -1;

}

Однако дальше не знаю как им задать размер, который они должны занимать по ширине (33%, 34%, 33%).

Пробовала писать по отдельности каждое свойство, начиная с background-image, однако в таком случае даже

background-repeat: no-repeat, no-repeat,no-repeat;

работает некорректно, так как не применяет значение для первого img.

Answer 1

background-image: url("../img/lending-bg-1.jpg"), url("../img/lending-bg-2.jpg"), url("../img/lending-bg-3.jpg");
background-repeat: no-repeat;
background-position: left top, center top, right top;
background-size: 33% auto, 34% auto, 33% auto;

или

background-image: 
  url("../img/lending-bg-1.jpg") no-repeat left top / 33% auto,
  url("../img/lending-bg-2.jpg") no-repeat center top / 34% auto,
  url("../img/lending-bg-3.jpg") no-repeat right top / 33% auto;

Answer 2

Что именно не получается? Попробовал в вашем коде добавить размер 33%, 34%, 33%. Кажется, всё работает.

div {
  outline: 1px solid tomato;
  
  width: 100%;
  max-width: 900px;
  height: 500px;
  
  background:        url("https://upload.wikimedia.org/wikipedia/ru/3/31/Winniethepooh.jpg") no-repeat left,
  url("https://upload.wikimedia.org/wikipedia/ru/d/dd/Pigletdisney.jpg") no-repeat center,
  
  url("https://ru.wikifur.com/w/images/c/c6/Tigger.png") no-repeat right;
  
  background-size: 33%, 34%, 33%;
}

<div></div>

БЛОГ НА HUSL

Не могу задать правильно параметры для multiple background в ::before

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