Как установить один background-image поверх другого background-image?

Question

Помогите пжл поставить background-image (изобраение с тел) поверх фонового изображения (чет не показывается оно на фрагменте). Хотя бы примерно)

Перепробовал разные "формулы" не хочет становиться на места. Работает только если img в html поставить - но это не удачный вариант для меня.

И есть ли какие-то способы сделать белый квадрат за текстом?

.wrapper-tour-this {
    background-image: url("/https://elitestudent.ru/images/8804_ho_00_p_2048x1536.jpg");
  background-color: #cccccc;
  height: 1133px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.background-phone {
    position: absolute;
  bottom: 0;
    left: 34%;
    transform: translate( -50%);
    display: flex;
}

<div class="wrapper-tour-this">
    <div class="background-phone">
        <img src="https://www.clipartmax.com/png/full/153-1535246_our-product-iphone.png" alt="" class="photo-phone">
    </div>
</div>

Заранее большое спасибо)) Прикрепеляю образец и код.

Answer 1

Выставляется по порядку первый url() , второй url;

Так же по порядку background-position и background-size

Во всех случаях можно использовать vw, px, em, rem, %, mm, m, cm, km e.t.c....

.background {
  width: 100%;
  height: 500px;
  background: url(https://www.clipartmax.com/png/full/153-1535246_our-product-iphone.png), url(https://photocentra.ru/images/main66/668955_main.jpg);
  background-size: 300px 330px, cover;
  background-repeat: no-repeat;
  background-position: 100px bottom, 0 0;
}

<div class="background"></div>

БЛОГ НА HUSL

Как установить один background-image поверх другого background-image?

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