Фоновый рисунок CSS не отображается

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Вы должны использовать следующее:

        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.

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

Работал на меня.

Ответ 7

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

background-image: url ('path') без повтора 0 0;

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

    ширина: х; высота: у;

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

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

Ответ 8

Вы должны использовать относительный путь в URL. Я думаю, что вы сделали две папки в корневом каталоге, где находится ваш index.html. Одна из них - папка "CSS", а другая - папка "img".

Теперь, если вам нужен доступ к папке 'img' в файлах css. Таким образом, вы должны вернуться в корневой каталог один раз, используя синтаксис "../". Затем перейдите в папку "img", используя синтаксис "../img". Затем напишите название изображения "../img/debut_dark.png".

Ответ 9

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

background-image:url(atom.jpg);

Ответ 10

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

Ответ 11

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

Ответ 12

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

Ответ 13

Я была такая же проблема. Для меня это работало с:

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;

Ответ 14

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

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