У меня есть файл HTML с подкаталогом под названием img с изображением с именем debut_dark.png. В моем файле CSS у меня есть:
body {
background: url(/img/debut_dark.png) repeat 0 0;
}
HTML файл имеет тег body и действительно содержит файл CSS. Я точно знаю, что файл CSS включен правильно, так как все остальное отформатировано правильно.
Фоновое изображение не отображается, я вижу только белый фон. Любые идеи, как исправить это, или даже как его отладить?
Согласно вашему пути к файлу CSS, я предполагаю, что он находится в том же каталоге с вашей HTML-страницей, вы должны изменить url следующим образом:
body { background: url(img/debut_dark.png) repeat 0 0; }
Вы должны использовать следующее:
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.
Я знаю, что это не касается точного случая OP, но для других, поступающих из Google, не забудьте попробовать display: block; на основе типа элемента. У меня было изображение в <i>, но оно не появлялось...
Убедитесь, что ваше тело имеет высоту, f.ex:
body {
background: url(/img/debut_dark.png) repeat;
min-height: 100%;
}
У меня такая же проблема. Но он работает правильно для меня
background: url(../img/debut_dark.png) repeat
body {
background: url("../img/debut_dark.png") no-repeat center center fixed;
}
Работал на меня.
Всегда хорошо иметь эти дополнительные свойства помимо
background-image: url ('path') без повтора 0 0;
установить размер элемента
ширина: х; высота: у;
фон-размер: 100%
Вы должны использовать относительный путь в URL. Я думаю, что вы сделали две папки в корневом каталоге, где находится ваш index.html. Одна из них - папка "CSS", а другая - папка "img".
Теперь, если вам нужен доступ к папке 'img' в файлах css. Таким образом, вы должны вернуться в корневой каталог один раз, используя синтаксис "../". Затем перейдите в папку "img", используя синтаксис "../img". Затем напишите название изображения "../img/debut_dark.png".
Я использую встроенный CSS на локальном компьютере. Я поместил файл atom.jpg в ту же папку, что и мой html файл, затем этот код работал:
background-image:url(atom.jpg);
Хорошо, я понял, что этот атрибут отображает изображение, когда в нем содержится полное местоположение. Я просто загрузил это изображение на свой сервер и связал местоположение этого изображения в фоновом изображении: url ( "xxxxx.xxx" ); атрибут, и, наконец, он работал, но если у вас нет сервера, попробуйте ввести полное местоположение изображения в атрибуте, перейдя в свойство этого изображения. Хотя я использовал этот атрибут в теге HTML файла, но он наверняка работает и с файлом CSS. Если этот метод не работает, попробуйте загрузить изображение в Интернете, например, поведение, facebook, instagram и т.д., И проверьте изображение и скопируйте его в свой атрибут. Надеюсь, что это будет работать
У меня была та же самая проблема, после того, как я удаляю повторяющуюся часть 0 0, это решило мою проблему.
Если ваш путь верен, то я думаю, что в вашем теле нет элемента. Просто определите высоту тела, и ваш код будет работать.
Я была такая же проблема. Для меня это работало с:
background: url("../img/green.jpg") no-repeat center bottom/cover;
height: 100vh;
В основном проблема заключается в пути к файлу.
Передняя косая черта в начале URL-адреса делает поиск файла в корне. Удалив это, это будет путь относительно этого файла css - вот так:
background-image: url(img/debut_dark.png);
Если вы используете Atom, копирование пути к проекту иногда включает в себя косую черту в скопированном пути, поэтому будьте осторожны.