Почему мое фоновое изображение не отображается? - PullRequest
Новая
       18

Почему мое фоновое изображение не отображается?

2 голосов
/ 02 февраля 2012

Я пытаюсь разместить повторяющийся градиент .png в качестве фонового изображения для div.

CSS: 

background-image: url(./images/backbar.png) repeat-x;

Я также пробовал с кавычками, и не быломенять.Вот что говорит интерфейс стрекозы в Opera: 

#final_bar { 
    color: rgb(0, 0, 0);
    display: block;
}
nepan.css:43
.bar { 
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 771px;
}
default values
div { 
    <strike>display: block;</strike>
}
Inherited from div
nepan.css:31
.wrapper { 
    <strike>color: rgb(40, 40, 40);</strike>
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

^ Свойство стиля даже не отображается, поэтому я ошибаюсь?

Теперь по различным вопросам:

  1. Мои файлы HTML и CSS находятся в одном каталоге (вы заметите, что изображение используется в div - я сделал это, чтобы определить, был ли файл доступен - он есть).

  2. Я уже тестировал эту страницу в IE / Chrome / Firefox / Opera.Само изображение отображается как отдельное изображение, за исключением в Firefox.

  3. http://nepaninjas.com Этот код в настоящий момент работает с ошибкой.

Ответы [ 3 ]

6 голосов
/ 02 февраля 2012

Вы заявили, что это неправильно 

background-image: url(./images/backbar.png) repeat-x;

Должно быть 

background: url(./images/backbar.png) repeat-x;

Если вы используете background-image, ваше единственное возможное значение - image-url, а не что-либо еще.

3 голосов
/ 02 февраля 2012

Background-image явно позволяет вам установить фоновое изображение и ничего больше. Использование свойства background позволит вам применить несколько настроек к фону в одной строке. 

background: url(./images/backbar.png) repeat-x;

Вот спецификация, которую вы можете указать в свойстве background: 

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

Также имейте в виду, что путь в URL-адресе относительно местоположения самого файла CSS. Если вы можете, я рекомендую использовать корень http для ваших путей к файлам. Это позволяет вашему CSS быть более гибким, если вы будете реструктурировать или перемещать свой файл CSS, пути к изображениям впоследствии не нужно будет обновлять. Поэтому, если вам удастся, я бы порекомендовал: 

background: url(/images/backbar.png) repeat-x;

При условии, что ваши изображения находятся в http://domain.com/images/

0 голосов
/ 02 февраля 2012

Измените URL вашего фонового изображения. Если он находится во внешнем каталоге, используйте две точки вместо одной (../images вместо ./images)

...