Проблема с фоновыми изображениями

Question

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

 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;
}

Answer 1

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

Answer 2

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

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.stack.imgur.com/l6ohJ.png') 284px 0px no-repeat, url('https://i.stack.imgur.com/6lPLh.jpg') 0 0 no-repeat;
}

<div class="fon"></div>

БЛОГ НА HUSL

Проблема с фоновыми изображениями

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