Фоновое изображение не отображается в div - PullRequest
Новая
       23

Фоновое изображение не отображается в div

0 голосов
/ 06 сентября 2018

Я перепробовал все и не могу понять, почему я не могу получить фоновое изображение для этого div. 

**Here is the code:**


body {
  margin: 0px;
  padding: 0px;
}

#top {
  background-image: url(../IMG/PINS.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<html>

<head>
  <title>TEST BCKGRND IMAGE</title>
  <link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>

<body>
  <div id="top">


  </div>
</body>

</html>

Структура файла настроена следующим образом: у меня есть главная папка с именем TEST_SITE, внутри этой папки у меня есть папка для моего CSS и папка для моих изображений с именем IMG.

Не могу понять, почему фоновое изображение не отображается.

Если кто-нибудь может подсказать мне, что может быть не так, я был бы очень признателен.

Спасибо.

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Это потому что твой div пуст. Если вы добавите контент к нему, вы увидите фон. Вы также можете установить высоту или добавить отступ с помощью CSS. 

<div id="top">
 <p>A large amount of text here</p>
</div>

или 

#top{
 height:400px;
 background-image: url(yourimagehere); 
 background-repeat:no-repeat;
 background-position:center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

или 

#top{
 padding: 25px 0;
 background-image: url(yourimagehere); 
 background-repeat:no-repeat;
 background-position:center center;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
0 голосов
/ 06 сентября 2018

установка высоты элемента #top важна: если вы установите ширину, а затем высоту на авто, фон все равно не будет отображаться, потому что внутри элемента нет ничего для фона. Однако, если вы принудительно установите высоту, установив ее в CSS, фон покажет. Код, который вы дали для вашего пути, неверен, потому что background-image ожидает только путь к изображению (и ничего больше), тогда как то, что вы дали, подходит для background.

Смотри мою скрипку

0 голосов
/ 06 сентября 2018

Вам нужно установить значение высоты и ширины из #top и использовать background-position:center center; background-repeat:no-repeat;, как мой ответ: например 

#top{
   width:500px;
   height:500px;
   background-image: url(YOUR IMAGE PATH); 
   background-repeat:no-repeat;
   background-position:center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

или вы можете сделать это так: 

#top{ 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   background:url(YOUR IMAGE PATH) no-repeat fixed center; 
   width:500px;height:500px;
 }
...