Основной вопрос CSS относительно фоновых изображений для div

Question

Я программист, пытающийся выучить некоторые CSS, и я уже столкнулся с камнем преткновения.

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

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        <div class="span-8">
            Box1
        </div>
        <div class="span-4">
            Box2
        </div>
        <div class="span-4 last">
            Box3
        </div>
        <div class="span-16 last">
            Main content
        </div>
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
    <div class="span-24 last">
        Footer
    </div>
</div>

В моем CSS есть следующее:

body {
    background-color:#FFFFFF;
}

div.container {
    background:url(/images/bck.jpg);
}

Я просто хочу отобразить изображение для фоновой области для контейнера div, но ничего не отображается. Если я уберу фоновый раздел из css и добавлю background-color: # 000000; тогда я вижу черный фон для контейнера div.

Что я пропускаю?

Answer 1

Скорее всего, вы не указали правильный путь к изображению:

background:url(images/bck.jpg);

Убедитесь, что:

• Вы указываете правильный путь
• Имя файла изображения правильное
• Файл изображения находится в папке images

Примечание: Поскольку я ответил на вопрос сегодня, см. , как указать путь с помощью ../.

Answer 2

Скорее всего, путь к изображению неверен. Помните, что изображение должно быть указано относительно местоположения вашего файла CSS. Допустим, у вас есть папка с именами стилей с вашими файлами CSS, и у вас есть папка с изображениями с вашими изображениями. Тогда вам может понадобиться указать:

 ../images/bck.jpg

для доступа к этому изображению.

Answer 3

Я считаю, что использование Firebug для Firefox, веб-инспектора для Safari или инструментов разработчика для MSIE 8 помогает мне диагностировать подобные проблемы. Осмотрите элемент div.container и посмотрите, какой путь отображается для вашего изображения.

Конечно, если у вас есть доступ к журналам вашего сервера, вы также можете проверить их, чтобы узнать, какое изображение было запрошено.

У меня недавно была такая же проблема, когда изображение в формате JPEG отказывалось показывать, но только в MSIE. Мне пришлось открыть изображение в фотошопе и снова использовать «Сохранить для Интернета», а затем снова загрузить его. Я не уверен, что это был за глюк, возможно, он был сохранен в несовместимом варианте JPEG или был каким-то образом поврежден, но это сработало для меня.