Стандартное фоновое изображение HTML5 не отображается

Я создаю веб-сайт с помощью HTML5Boilerplate, но каждый раз, когда я использую свойство css background или background-image, изображение не отображается.

Папки:
root/css/style.css
root/img_files/logo.png

Мой код css выглядит так:

#logo {
    position: absolute;
    left: 20px;
    top: 10px;
    width: 164px;
    height: 42px;
    background: url(../img_files/logo.png);
    background-repeat: none;
}

Моя таблица стилей правильно добавлена ​​на страницу:

Я не могу добавить ни одного фонового изображения к объектам на странице. HTML5Boilerplate был установлен, так что, возможно, проблема не в этом, я не уверен. Вы знаете, почему правильные CSS и HTML не отображают изображения?


html css background background-image html5boilerplate
person Seda Erdem    schedule 12.01.2013    source источник
comment
Это работает, если вы попробуете это в отдельном html? Попробуйте установить фон для тела (просто чтобы узнать, не является ли проблема #logo). Я только что создал сеть с последней версией h5b и без проблем установил фоновое изображение своего тела...   -  person talabes    schedule 12.01.2013

Ответы (3)


arrow_upward
0
arrow_downward

Изменять

background-repeat: none;

to

background-repeat: no-repeat;

Или просто используйте

background: url(../img_files/logo.png) no-repeat;
person Enve    schedule 12.01.2013

arrow_upward
0
arrow_downward

Я только что столкнулся с той же проблемой и обнаружил, что если вы измените идентификатор с #logo на что-либо еще (конечно, в HTML и CSS), то тот же код начнет работать. Не могу сказать, что «блокировало» использование #logo, но сейчас у меня нет достаточно времени, чтобы выяснить, в чем проблема.

Решение на данный момент состоит в том, чтобы использовать что-либо еще, кроме #logo, например. #logoTop или #siteLogo

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Это была проблема с опечаткой селектора, из-за которой браузер проигнорировал это. Странно, что этого не произошло, когда селектор был изменен на какое-то другое имя, кроме #logo. Обратите внимание, что #logo:видимая опечатка (вместо посещенной)

#logo, #logo:link, #logo:visited,
#logo:active, #logo:focus, #logo:hover
{
    display: block;
    width: 340px;
    height: 150px;
    background: url(../images/design-elements.png) 0 -300px no-repeat;
}
person T. Tiscalli    schedule 16.02.2013

arrow_upward
0
arrow_downward

У меня была та же проблема, и я обнаружил, что если без свойства ширины и высоты изображение не будет отображаться.

person user3072748    schedule 06.12.2013