Устранение неполадок CSS background-image - PullRequest
Новая
       0

Устранение неполадок CSS background-image

3 голосов
/ 04 ноября 2011

Я новичок в переполнении стека, но я работаю с CSS уже около полутора лет.

Я не могу заставить свойство background работать вообще для моего div class = "content".В конечном итоге я просто хочу поместить фоновое изображение в div, используя background-image: url ('home_bg.png') ;.

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

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

HTML: 

<body>
 <div class="navbar"> ... </div>
 <div class="content">
  <div class="box" id="twitter"> ... </div>
  ...
  ...
 </div>
 <div class="footer> ... </div>
<body>

CSS: 

body {
  background-color: #000;
  background-repeat: repeat;
  margin: 0px;
  padding: 0px;}
div.content {
  background-image: url("home_bg.png");
  margin: 0 auto;
  position: relative;
  top: 84px;
  width: 1024px;}

Страницанаходится здесь , если это тоже помогает.

Заранее спасибо!~ Tatianna ~

Ответы [ 3 ]

2 голосов
/ 04 ноября 2011

Поведение, которое вы видите, состоит в том, что div.content не имеет высоты, потому что все содержащиеся в нем элементы плавают.Есть много способов исправить эту проблему.Самое быстрое решение - добавить родительский элемент для центрирования (margin: auto) и float div.content.Плавающий элемент будет иметь высоту вложенных элементов.Вы также можете применить overflow: hidden к div.content, но вам нужно настроить макет и немного css, чтобы это сработало.

2 голосов
/ 04 ноября 2011

Это ваш контент div. У него нет заданной высоты, и его составляющие элементы "вне потока" (плавающий или позиция: абсолютная). Это эффективно создает содержимое div высотой 0px. К разнице можно добавить это правило стиля: 

html, body, .content {height:100%;}

не решение, а начало.

1 голос
/ 04 ноября 2011

Это как-то связано с тем, что вы делаете это относительным. Если я изменю свойство position на «fixed» или установлю высоту «500px», появится ваш фон. Если / когда я смогу понять, почему это происходит, я дам вам знать.

...