Background image url почему не работает

How to fix CSS background-image not working | HTML/CSS

Working with background images in CSS can be tricky. Because even if you set it in the code, there are other factors that may prevent the background-image from showing up on the page.

To help with that, here are four ways to fix your background-image not working, using HTML and CSS:

1. Check that your CSS file is linked correctly in your HTML file.

In order for your CSS styles to get loaded in your website, you need to add a <link> tag in your HTML file. This tag should be located inside the <head></head> tags, and should look something like this:

How can you tell if your CSS file is loaded correctly or not?

One sign is if you load your website and the background is white, all the text looks like Times New Roman font, and there are no colors or other styles.

You can also check your browser’s inspector tool by right-clicking anywhere in the page and selecting “Inspect Element” or pressing Ctrl-Shift-I. In the inspector, if you see an error that says 404 not found for the CSS file, or The resource. was blocked due to MIME type mismatch , that tells you that there was a problem loading the CSS file.

Error showing: The resource was blocked due to MIME type mismatch

If you see one of these errors and your website looks unstyled, the first thing to check is In the <link> tag. Make sure that the href attribute is loading the same filename as your actual CSS file, and that the path is correct.

The path needs to be relative to where your HTML file is. If the CSS file is in the same directory as your HTML file, you can set href to be style.css (or whatever your CSS filename is).

I usually put a forward slash / before the path, for example: href=»/style.css» . This will make sure that the path will start at your website root.

You may need this if you have pages in different subfolders that are all loading the same <head> code. For example, if you’re using a templated CMS (content management system) where there is shared code.

2. Make sure the image path is set correctly in the background-image url.

Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.

How to tell if the background-image is loaded correctly or not?

If the background image doesn’t seem to be loading, and you see a 404 error in the inspector for the image, that’s a good indicator that there’s an issue with the image itself.

Error showing CSS file 404-ing

If this is happening, double-check that the image filename matches the actual file, and that the path in the background-image: url() is going to the correct location.

The location of the image file needs to be relative to the location of the CSS file itself, not your website root. So if your CSS file is in a subfolder, the path may need to be different than if the CSS file was in your root.

To help explain this, let’s say you have a website file structure like this:

This website contains the index.html file in the project root, a css folder that contains the style.css file, and an img folder that contains the image cat-pic-1.jpg .

In your CSS styles, if you want to load cat-pic-1.jpg as a background image, the file path needs to:

  • Go up one level out of the css folder,
  • Navigate into the img folder,
  • Then load the image file itself.

The background-image property in the CSS file should look like this: background-image: url(‘../img/cat-pic-1.jpg’) .

The ../ symbols mean that you will go up one level in the file structure.

You can do the same thing by setting: background-image: url(‘/img/cat-pic-1.jpg’) .

This approach uses the forward slash ( / ) to start from the website root, then going into the img folder to load the image file.

So whether you navigate up through parent folders or start at the website root, don’t forget to utilize your code inspector to test and check if the image is loading or giving you a 404 error.

3. Explicitly set the element’s width and/or height.

If the image isn’t showing up, but you aren’t getting any 404 errors, go into the code inspector and check the element itself.

If there is no HTML content in the element, it might have zero width or height (or both!). This means that even though the background image is technically loaded correctly, the element itself is essentially invisible if it’s 0px in size.

Code inspector showing image has 0 pixels in height

Check out the above example showing a website and the code inspector. If you hover over the .card__image element on the right pane, a label will appear over the element on the left pane, telling you that it has 354px width and 0px height.

That 0px height means the element won’t be visible.

To fix it, explicitly set the height of the .card__image element to height: 120px . If the element might have text content of varying length, you can set it to min-height: 120px instead, so it will be a minimum of 120px tall but can be taller if the text content needs more space.

Card showing the background image correctly now

4. Make sure you are using correct syntax in CSS background properties.

One last thing you can check is if you are using the correct syntax for the background CSS properties.

Here are some common ones you might be using, along with possible values:

  • background-color: #000000;
  • background-image: url(«/landscape1.jpg»);
  • background-position: center;
  • background-repeat: no-repeat;
  • background-size: cover;

You can also use the shorthand background property that lets you combine all those different values in one style rule:

If you are using this shorthand property with a lot of values, make sure that the syntax is correct. The order of the different background properties shouldn’t matter, but there is one tricky pitfall if you are setting background-size .

The background-size value can only be used if it immediately follows the background-position value, with a forward slash ( / ) between them. In our example it is written like this: center/cover , where center is the background-position and cover is the background-size .

You can use the background-position value by itself, but if you try to use just cover by itself, the CSS rule will be invalid and none of the background properties will work at all.

If that happens, you will be able to see the invalid rule in the code inspector like this:

Error showing invalid CSS rule

I’m making a course that will teach you how to build a real-world responsive website from scratch!

Sign up to get emails about new posts and other info. Unsubscribe anytime.

Affiliate Disclaimer

I participate in various affiliate programs and my content contains affiliate links. If you purchase through those links, I may receive a commission from the seller, at no cost to yourself. It’s one way you can support this site!

As an Amazon Associate I earn from qualifying purchases. I only recommend products that I personally know and believe are helpful to my readers.

Не отображается background-image: url(data:image

Вижу что стиль в коде страницы есть, фаербагом вижу что он определяется css, даже картинку могу открыть в бразуере, а на сайтее е не вижу. Не могу врубиться почему?

Код битый у картинки.

Что за троеточие?

span — инлайновый элемент.

Попробуйте добавить в стиль display:block;

Не надо это УГ писать

Да, экранировать слешами кавычки в данной ситуации — излишне, как по мне. Полностью поддерживаю предыдущего своего коллегу. Лучше, конечно, писать так, более изящно и понятно для вас:

Теперь по сути вашего вопроса. Всё верно вы подметили, браузер видит эту таблицу стилей и нормально её подтягивает. Но проблема не в таблице стилей, а в HTML-элементе. Вы используете строковый (display: inline;) HTML-элемент <span>, который по умолчанию не имеет ни ширины, ни высоты. Для того, чтобы он заработал, необходимо его сделать блочным (display: block;), либо строчно-блочным (display: inline-block;). Кроме этого, если даже в таком случае он не заработает, значит он пустой в HTML-коде страницы. Потому нужно ему либо добавить содержания в самом HTML-коде страницы, либо же в таблице стилей задать ему ширину (width) и высоту (height). Но только как блочному элементу, поскольку к строчным элементам ширина и высота не применимы.

Коллеги, извините, не могу поправить предыдущее сообщение. Автоматически выставились смайлики, но я имел ввиду следующее:

не работает background-color

<body style="background-image: url(images/background.gif);">
<div style="width:844px;height:80px;background-color:blue;background-image:url(1.bmp);">
sffdsf
dsfsdf
sdfsfdsfs

и ничего не работает(background-color не пашет) 🙁

Скрин бы выложил что-ли. Скорее всего, твой фон `1.bmp` тайлится. У тебя не указано свойство background-repeat, т.е. ты не ограничиваешь текстуру, вот она и перекрывает весь твой фон blue.

в данном случае лучше записывать в короткой форме и, как правильно заметили выше, указывать свйоство background-repeat.
То есть должно получиться следующее:

Кавычки забыл в url. Учитывай что картинка будет искаться относительно данному файлу. Если хочешь искать относительно корня директории сайта, пропиши ещё / перед images.
И да, как посоветовали, используй background CSS тэг, заместо конкретизированных. Если конечно не вынуждает специфика дизайна использовать конкретизированные (иногда нужно менять параметры отображения background’а, тогда нужно использовать конкретизированные тэги).
Зы, background-color будет игнорироваться, т.к. у тебя задник зациклен на весь блок, естественно если там картинка на весь блок, то заднего цвета и не будет.

Вот бери и играйся тут, также заюзай этот сайт как постоянную справку: http://www.w3schools.com/css/tryit.asp?filename=trycss_default

Ockonal
Не обязательны, но настоятельно рекомендуются просто взять в правило, т.к. есть куча неприятных символов, которые могут легко сломать CSS код.
http://stackoverflow.com/questions/851724/css-background-image-wh… correct-usage

да,но как сделать изображение в поле дива цветным(добавить цвет)?

Загрузить цветное изображение.
HTML не модифицирует содержание, в нём используя CSS ты лишь указываешь параметры отображения, без влияния на само содержание.
background-color — задаёт цвет заднего фона, а не цвет изображения фона.
Почитай основы веб разработки, у тебя даже видимо представление о том что такое html и css, совсем хромает..

я знаю что это и теперь знаю что HTML устаревшее дерьмо.нах он вообще нужен. сейчас популярны анимация и другая красота а не тупой статический интерфейс.это самое устаревшее в компах,что осталось(но флеш немного недотягивает по функциям до HTML).HTML заставляет жудко расходовать память,так,что бы вывести 20раз одно сообщение,его надо написать 20раз,что за дибилизм!в HTML вообще никакого программирования нет.Когда же выкинут HTML на помойку,нужна новая архитектура сайтов,а то что html легко сторонне отредактировать уже даже недостаток-любой может скопировать твой сайт(хоть php к счастью невозможно).

Вот, дарю. Чтобы замостить фон страницы просто убрать строку background-repeat : no-repeat;

Все дружно ждём стандарты HTML5 и CSS3. Редактор Quanta 3.5 пока ещё действует.

спасибо,но НЕ работает 🙂 ладно,видно HTML реально говно(мне надо див залить цветным изображением)

Это не HTML, а, я так подозреваю, браузер гадит. Хоть что за браузер и как выглядит картинка? Не все свойства не все браузеры поддерживают. А цвет заливки появился или как? Картинка по указанному адресу имеется? На заливке браузер не вякнет, что чего-то нет, а продолжит как будто всё как надо. Тест ниже что показывает? Обе картинки видно?

1ый код:
виден фон-1тайл,поверх залитый див(отодвинутый налево и направо),цвет не изменился(белый синим должен стать).

видны две картинки 1.bmp ниже

у меня вся проблема в том,что бы картинка-заливка дива сменила свой цвет,что вроде,на html не возможно

MoKa
Окей, спасибо, запомню. Правда раньше ни разу не возникало проблем с этим.

С картинкой есть хорошие средства борьбы через альфу. Если заменить один цвет на прозрачный, то можно получить как раз картинку на цвете фона. Ещё можно всю картинку сделать полупрозрачной пока CSS3 не утвердили. Альфу поддерживают png, bmp, tif и gif. Какой из них сожмёт лучше можно узнать опытным путём, но только не bmp. Пустое место gif хорошо жмёт, а png всякое рябое. Чтобы цвет менялся каждый раз при перезагрузке можно на сервере вбить цвета через рандом. У меня на сайте половина картинок с альфой.

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 отображаются

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *