1

введите сюда описание изображенияВторая фоновая картинка не отображается. Как это исправить?

 background: url(../img/visibility/white-list background.jpg),  url(../img/visibility/background figure.png);
    background-position: -30px -20px, 50px 0;
    height: 359px;
    margin-top: -180px;
}

введите сюда описание изображения

2
  • порядок указания так же влияет на то, как будет отображаться картинки
    – Grundy
    Commented 14 авг. 2022 в 11:08
  • залей картинки куда-то, чтобы их можно было использовать в сниппете в вопросе
    – Grundy
    Commented 14 авг. 2022 в 11:09

2 ответа 2

1

Уберите пробелы в названиях картинок.

1

вам нужно для каждого фонового изображения задать положение

background:url(1.png)(положение/отступы) no-repeat,
           url(2.png)(положение/отступы) no-repeat;

Например:

.fon {
  width: 100%;
  height: 350px;
  border: 1px solid red;
  background: url('https://avatars.mds.yandex.net/i?id=2a0000017a0db6b6a22cf3970aed5caa4a1c-4351509-images-thumbs&n=13') 284px 0px no-repeat, url('http://i.mycdn.me/i?r=AzEPZsRbOZEKgBhR0XGMT1Rk9NHTYxs7yOaBaV30Fc35JKaKTM5SRkZCeTgDn6uOyic') 0 0 no-repeat;
}
<div class="fon"></div>

P.S дополнение с изображениями

.fon {
  width: 100%;
  height: 350px;
  border: 1px solid red;
  background: url('https://i.sstatic.net/l6ohJ.png') 284px 0px no-repeat, url('https://i.sstatic.net/6lPLh.jpg') 0 0 no-repeat;
}
<div class="fon"></div>

4
  • К сожалению, не помогло. Насколько я понимаю первый фон перекрывает второй и поэтому он не отображается.
    – user512592
    Commented 14 авг. 2022 в 10:26
  • @user512592 добавьте свои изображения Commented 14 авг. 2022 в 10:40
  • Добавил по порядку
    – user512592
    Commented 14 авг. 2022 в 10:45
  • @user512592 дополнил ответ - посмотрите Commented 14 авг. 2022 в 10:50

Ваш ответ

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