background-image не работает с Chromes

Question

У меня есть фоновое изображение, которое хорошо отображается в Firefox, но не отображается в Google Chrome вообще. Я не понимаю ... Большое спасибо.

изменить: я вижу, что мне сказали, что ответ уже в другом месте, но нет. У меня нет блока добавления, так что это не та же проблема. В любом случае, спасибо.

CSS:

    #section2{
        background: url(../images/references.png) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
    }

HTML:

<div id="section2">

</div>

Answer 1

использовать фоновое изображение: свойство

#section2{
        background-image: url(../images/references.png); 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        position:relative;
    }

Answer 2

В div нет высоты / содержимого, поэтому вы ничего не увидите. Код в любом случае в порядке

#section 2 {
height: 200px;
width: 200px;
}

Добавьте это к вашему css

Answer 3

Я не знаю, как вы можете увидеть свое изображение в Firefox с помощью кода, который вы нам показываете.

Размер Div нельзя настроить в соответствии с размером фонового изображения.Это означает, что если ваш div имеет высоту и ширину 0, мы не сможем увидеть background-image.

Если вы добавите контент в ваш div или width и height в CSS, вы увидитеизображение появляется.

 #section2 {
  background: url('https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  height: 500px;
  width: 500px;
}

<div id="section2"></div>