Background-image не работает
Но в самом файле html свойство background-image работает.
Подскажите, почему не работает, если я размещаю в в файле css?
в css файле пропишите
Между тегами <head> у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:
Как видите вы не дописали type=»text/css» в теге link .
Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются
пол суток пробовал
,а оказывается надо вот так
Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.
Не отображается background-image: url(data:image
Вижу что стиль в коде страницы есть, фаербагом вижу что он определяется css, даже картинку могу открыть в бразуере, а на сайтее е не вижу. Не могу врубиться почему?
Код битый у картинки.
Что за троеточие?
span — инлайновый элемент.
Попробуйте добавить в стиль display:block;
Не надо это УГ писать
Да, экранировать слешами кавычки в данной ситуации — излишне, как по мне. Полностью поддерживаю предыдущего своего коллегу. Лучше, конечно, писать так, более изящно и понятно для вас:
Теперь по сути вашего вопроса. Всё верно вы подметили, браузер видит эту таблицу стилей и нормально её подтягивает. Но проблема не в таблице стилей, а в HTML-элементе. Вы используете строковый (display: inline;) HTML-элемент <span>, который по умолчанию не имеет ни ширины, ни высоты. Для того, чтобы он заработал, необходимо его сделать блочным (display: block;), либо строчно-блочным (display: inline-block;). Кроме этого, если даже в таком случае он не заработает, значит он пустой в HTML-коде страницы. Потому нужно ему либо добавить содержания в самом HTML-коде страницы, либо же в таблице стилей задать ему ширину (width) и высоту (height). Но только как блочному элементу, поскольку к строчным элементам ширина и высота не применимы.
Коллеги, извините, не могу поправить предыдущее сообщение. Автоматически выставились смайлики, но я имел ввиду следующее:
Background-image не работает
Но в самом файле html свойство background-image работает.
Подскажите, почему не работает, если я размещаю в в файле css?
Ответы (8 шт):
Судя по имени стиля вам нужен фон страницы. Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png
в css файле пропишите
Между тегами <head> у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:
Как видите вы не дописали type=»text/css» в теге link .
пол суток пробовал
,а оказывается надо вот так
Может помочь указания размеров картинки фона.
Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.
Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются
Forums
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
- This topic has 16 replies, 6 voices, and was last updated 3 years, 1 month ago by ajsaule .
Okay, so here’s the code I have:
I have the background image saved in the images folder, obviously, as a jpeg. When I go to preview the HTML in Firefox, nothing is showing. What am I doing wrong?
Would be best if there was a demo URL we could see. Three things I can think of to check:
1) The file name is EXACTLY right.
2) The file path is EXACTLY right. This file path presupposes that the image folder is back up one level from where this CSS file is.
3) The file is saved correctly. You didn’t like accidentally save the file in PNG format but just call it a JPG.
1) The file name is EXACTLY right.
2) The file path is EXACTLY right. This file path presupposes that the image folder is back up one level from where this CSS file is.
3) The file is saved correctly. You didn’t like accidentally save the file in PNG format but just call it a JPG.
What do you mean when you say "This file path presupposes that the image folder is back up one level from where this CSS file is."?
And how would I go about putting a demo URL in?
You say you saved it as a "jpeg", but in your CSS you have written "jpg". Remember, these won’t be read as the same file!
as another note its also case sensitive. so image.jpg isn’t the same as image.JPG….
As for the file question:
typically people have a file structure like this
public_html/css/style.css (public_html is the root folder where you put your files for the site – It is normally called something different on each host or even just shown as a "/").
if you type this in your CSS – "background: url(images/bg.jpg)"
your stylesheet will be trying to pull the images from public_html/css/ images /bg.jpg – You just have to remember its finding the image relative to its file structure.
when you do the magical ../ your jumping back up a level then trying to find the images folder.