CSS фоновое изображение не отображается

у меня есть HTML-файл с директории img с изображением под названием debut_dark.png. В моем CSS-файле у меня есть:

body { 
    background: url(/img/debut_dark.png) repeat 0 0;
}

HTML-файл имеет тег body и включает файл CSS соответствующим образом. Я точно знаю, что файл CSS включен правильно, так как все остальное отформатировано правильно.

фоновое изображение не отображается, я вижу только белый фон. Есть идеи, как это исправить или даже как отладить?

19
background-image css html path

12 ответов

согласно вашему пути к файлу CSS, я предположу, что он находится в том же каталоге с вашей HTML-страницей, вы должны изменить url следующим образом:

body { background: url(img/debut_dark.png) repeat 0 0; }
13

вы должны использовать такой:


        body { 
            background: url("img/debut_dark.png") repeat 0 0;
        }

        body { 
            background: url("../img/debut_dark.png") repeat 0 0;
        }

        body { 
            background-image: url("../img/debut_dark.png") repeat 0 0;
        }

или попробуйте проверить правила CSS с помощью инструмента Firefox Firebug.

10

убедитесь, что ваше тело имеет высоту, f.ex:

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
3

У меня такая же проблема. Но это работает правильно для меня

background: url(../img/debut_dark.png) repeat
3

Я знаю, что это не касается точного случая OP, но для других, поступающих из Google, не забудьте попробовать display: block; на основе типа элемента. У меня был образ в <i>, но он не появляется...

2
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

работал для меня.

1

вы должны использовать относительный путь в URL-адресе. Я думаю, вы сделали две папки в корневом каталоге, где ваш индекс.html находится. Есть папки CSS' & другой папке ИМГ'.

теперь, если вам нужно получить доступ к папке " img " в css-файлах. Поэтому вам нужно вернуться один раз в корневой каталог, используя "../" синтаксис. Затем перейдите в папку "img", используя "..синтаксис /ИМГ". Затем напишите имя изображения "../ img / debut_dark.формат PNG."

1

Я использую встроенный CSS на локальном компьютере. Я положил атом.jpg-файл в той же папке, что и мой html-файл, тогда этот код работал:

background-image:url(atom.jpg);
0

Ну, я понял, что этот атрибут отображает изображение, когда в нем указано полное местоположение. Я просто загрузил это изображение на свой сервер и связал местоположение этого изображения в фоновом режиме-image:url("xxxxx.xxx"); атрибут, и он, наконец, работал, но если у вас, ребята, нет сервера, попробуйте ввести полное местоположение изображения в атрибуте, перейдя в свойство этого изображения. Хотя я использовал этот атрибут в теге HTML-файла, но он наверняка работает на CSS-файле тоже. Если этот метод не сработал, попробуйте загрузить изображение в интернете, например, behance, facebook,instagram и т. д., проверить изображение и скопировать его в атрибут.. Надеюсь, это сработает

0

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

0

всегда хорошо иметь эти дополнительные свойства, кроме

background-image: url ('path') no-repeat 0 0;

  1. установить размерность элемента

    ширина: x; высота:г;

  2. фон-размер:100%

    • Это свойство помогает поместить изображение в указанное выше измерение, которое вы определяете для элемента.
0

в основном проблема заключается в пути к файлу. Косая черта в начале url-адреса заставляет его искать файл в корне. Удаление этого, это будет путь относительно этого файла css-как это: background-image: url(img/debut_dark.png);

Если вы используете Atom, копирование пути проекта изображения иногда включает косую черту в скопированном пути, поэтому будьте осторожны.

-1