Что не так с этим CSS?

Question

У меня есть следующий код CSS:

.yellow {
    background-image: url('/images/yellowlight.png');
    background-repeat: no-repeat;
    height:100%;
    width:100%;
}

и следующий HTML-код:

<div class="yellow">&nbsp;</div>

Тем не менее, div на странице не имеет изображения. Вы можете увидеть это, нажав синюю кнопку «Состояние журналов» (во вкладке) на http://cl58logs.co.cc/.

Что не так с CSS?

Answer 1

Ваш div недостаточно велик. Фоновые изображения не будут масштабироваться. Если вы хотите, чтобы изображение масштабировалось, вам придется использовать тег img.

Также обратите внимание, что height: 100% не работает в CSS, кроме ячеек таблицы.

Answer 2

Проблема в том, что у div с фоновым изображением почти нет содержимого (кроме пробела).

Если вы заставляете div иметь большую высоту, например, изменяя CSS следующим образом:

.yellow {
background-image: url('/images/yellowlight.png');
background-repeat: no-repeat;
min-height:600px;
width:100%;
}

тогда ваше изображение появляется

Answer 3

Поскольку вы устанавливаете высоту и ширину на 100%, количество отображаемого изображения будет зависеть от элементов div, содержащих желтый класс. Попробуйте изменить ширину и высоту в классе статуса, и вы фактически увидите изображение bg на желтом.

Answer 4

Высота (437px) и ширина (700px) изображения больше, чем размеры вашего div. Установите соответствующую высоту и ширину для вашего div, чтобы изображение отображалось.

Установите Firebug , чтобы лучше проверять элементы HTML, когда вы сталкиваетесь с подобными проблемами.