0

Помогите пжл поставить 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>

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

0

1 ответ 1

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>

5
  • Спасибо большое!! Наконец-то влезло) Подскажите, а как теперь двигать этот телефон? У меня было так: left: 34%; transform: translate( -50%). Сейчас все сезжает (
    – user432161
    23 мар 2021 в 12:38
  • @dobr background-podition первый телефон второй сам фон 23 мар 2021 в 12:39
  • А можно ли как-то вытянуть тел поверх всех возможных блоков (div) в этой секции? z-index не работает(
    – user432161
    25 мар 2021 в 9:30
  • @dobr какой div ? 25 мар 2021 в 9:40
  • @dobr codepen.io/topicstarter/pen/ExZVdjL вот так ? 25 мар 2021 в 9:42

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.