Несколько фоновых изображений, не показывающих

Я работаю над веб-страницей с несколькими изображениями, но по какой-то причине загружается только одна из них.Несколько фоновых изображений, не показывающих

Вот соответствующая часть CSS:

#Upper { 
    width: 100%; 
    height: 80%; 
    margin: 0px; 
    padding: 0px; 
    background-image: url('Imgs/006-Code Geass.jpg'); 
    background-color: #ff6a00; 
} 

#Lower { 
    width: 100%; 
    height: 18%; 
    margin: 0px; 
    padding: 0px; 
} 

#lft { 
    width: 33%; 
    left: 0; 
    float: left; 
    position:relative; 
    background-image: url('Imgs/Camera.png'); 
    background-position: center; 
    background-repeat: no-repeat; 
} 

#cnt { 
    width: 33%; 
    float: left; 
    position: relative; 
} 

#rtg { 
    width: 33%; 
    float: right; 
    position: relative; 
} 

#Footer { 
    width: 100%; 
    height: 2%; 
    background-color: #ff6a00; 
}

и вот HTML:

<body> 

    <div id="Upper"> 
     Trying to see you my friend 
     <div> 
      Cominudapp una red social hecha al tamaño de tu ciudad 

     </div> 

    </div> 

    <div id="Lower"> 

     <div id="lft"> 
      Inscribir camara 
     </div> 

     <div id="cnt"> 
      Mapa de criminalidad 
     </div> 

     <div id="rtg"> 
      Comunidades seguras 
     </div> 

    </div> 

    <div id="Footer"> 
     Hello World 
    </div> 

</body>

Оба изображения находятся в одной и той же папке, но только Code Geass один покажет. Изображения никоим образом не являются окончательными и будут изменены, как только появятся реальные, но мы должны показать эту работу.

Edit:

Изменена высота до 100% и до сих пор не удалось. Выключите компьютер для перерыва, и он работает правильно, когда он включен. Я не знаю, как и почему я разрешаю вопрос открытым.

источник

2015-06-10 RobertoN

Вы уверены, что изображение находится в правильной папке с именем правильно? Проверьте, есть ли какие-либо ошибки в консоли разработчика. – APAD1

Лично я бы избегал пробелов в именах файлов, таких как '006-Code Geass.jpg' – j08691

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

Изображение на самом деле находится в позиции записи. Проблема в вашем теге html вы не указали фиксированную ширину и просто используете «%», поэтому размер фона - это размер области текста.

Вы можете проверить это, как:

<div id="lft"> 
    Inscribir camara<br> 
    some text</br><br> 
    some more text</br><br> 
    more text</br> 
</div>

источник

2015-06-10 21:42:05

Несколько фоновых изображений, не показывающих

ответ

Смежные вопросы