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

Не работает background: url в css

Пытаюсь добавить фото на фон первой страницы сайта. Пишу в css background: url («путь к файлу»), но фото не появляется. Css подключен верно, даже background-color работает нормально. Что делать?

Голосование за лучший ответ

Может путь до файла неверный?
Ссылочку в студию.

И да, прописывать надо:
background-image: url(../images/logo.png);
background-size: 100% 100%;

Никита КузьмичУченик (93) 2 года назад

сейчас обнаружил, что у меня вообще не вставляются фото, даже при вводе в html . Ответы майлру не позволяют писать больше 800 символов, так что код скину ввиде скрина

_ Искусственный Интеллект (749660) Никита Кузьмич, файл должен лежать в том же месте, что и страницы. И адрес нужно указывать относительно страниц, а не относительно того, где лежат файлы

95% ошибок новичков при отображении картинок — неправильный путь к картинке.
Никита КузьмичУченик (93) 2 года назад

как нужно правильно копировать путь к картинке? я с зажатым шифтом нажимал пкм и выбирал «копировать как путь», после чего скопированное вставлял в код. с тегом < img >это работало, в css — нет

Background-image не работает

Спасибо! Теперь работает. Вот почему в index.html работает без перехода на один уровень вверх ( ../ ), не пойму.

22 фев 2014 в 16:38

@Anton121212, потому что index.html находится на одном уровне с папкой img. И поэтому в index.html путь будет выглядеть прямым img/a.png

22 фев 2014 в 16:49
Спасибо! Я все понял!
22 фев 2014 в 16:54
Но не стоит забывать,что находясь на сервере точки не нужны и перед img нужно ставит «/»
28 фев 2016 в 12:30

Между тегами у вас некорректно написана ссылка на файл CSS. Ваш код должен выглядеть так:

Как видите вы не дописали type=»text/css» в теге link .

Отслеживать
ответ дан 22 фев 2014 в 16:33
1,014 9 9 серебряных знаков 25 25 бронзовых знаков
В HTML5 считается корректно. В HTML4, разумеется нет.
22 фев 2014 в 16:39
Да и я не заметил, что у ТС css находится в другой папке. Тоже моя ошибка. 🙂
22 фев 2014 в 17:01

Столкнулся с аналогичной проблемой. Решил! Изображения формата .png почему-то не отображаются этим свойством, а вот .jpg и .webp отображаются

Отслеживать
ответ дан 12 мая 2020 в 17:55
Андрей Иванчин Андрей Иванчин
11 1 1 бронзовый знак

 body < background-image: url(../img/a.png); >

Отслеживать
ответ дан 22 фев 2014 в 16:28
27.6k 5 5 золотых знаков 35 35 серебряных знаков 65 65 бронзовых знаков

Спасибо! Теперь работает. Вот почему в index.html работает без перехода на один уровень вверх ( ../ ), не пойму.

22 фев 2014 в 16:38

пол суток пробовал

background-image: url(../img/a.png); background-image: url("../img/a.png"); 

,а оказывается надо вот так

background-image: url('../img/a.png'); 

Отслеживать
67.9k 217 217 золотых знаков 77 77 серебряных знаков 219 219 бронзовых знаков
ответ дан 26 фев 2016 в 14:35
Andrey Passar Andrey Passar

Всем привет. Была такая же проблема: не работал backgrounf-image: url(link). Мучался часа 2, перепробовал всё, любые модификации но проблема оставалась. Ошибка заключалась в том, что не правильно был указан путь к картинке (файлу), и как не старался — ничего не помогало. Потом, когда я начал думать что html и css — не моё, мне вдруг пришла в голову мысль залезть в настройки. Я пользуюсь Notepad++ и обнаружил вот что: в пункте «Путь по умолчанию» было отмечено «запомнить последнюю директорию», я переставил отметку на «пройти за текущим документом», а в значении селектора background-image указал папку и файл: background-image: url(images/1.jpg) И все заработало. Надеюсь, кому да поможет инфа.

Отслеживать
ответ дан 18 окт 2017 в 17:38

Судя по имени стиля вам нужен фон страницы. Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png

body < margin: 0; padding: 0; background: url("img/a.png") repeat scroll left top #FFFFFF; overflow-y: scroll; >

Отслеживать
ответ дан 22 фев 2014 в 16:29
380 1 1 золотой знак 4 4 серебряных знака 19 19 бронзовых знаков
Если не работает, то проверьте правильный ли путь к картинке. то есть ../img/a.png или /img/a.png
22 фев 2014 в 16:32

Может помочь указания размеров картинки фона.

.image < background-image: url(img/a.png); width: 50px; /* ширина */ height: 50px; /* высота */ >

Отслеживать
ответ дан 27 мая 2016 в 16:26

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

• html
• css

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.21.1314

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Почему background image не работает

Проблема довольно банальна — ссылка на картинку блока из CSS файла блока не работает. Единственный работающий вариант это:

. background-image: url(../../common.blocks/header/images/bg-header.png) . 

Фактически это абсолютный путь к блоку, в который так-же входит и путь к папке блоков common.blocks , что на мой взгляд совершенно неверно. Т.е. если я допустим захочу вынести потом этот компонент в допустим папку blog.blocks то получается надо будет бегать и пути менять. Или переименую я блок — та-же история.

Вот такой вариант:

. background-image: url(images/bg-header.png) . 

Borschik (через enb — project-stub) чё-то как-то не помог — такой путь он просто проигнорировал. Пытался крутить конфиг .borschik но без особого успеха (но тут я сильно глубоко не рыл).

Итого вопрос — как всё-таки идеологически верно указывать пути к картинкам блока в CSS-файлах блока?

Комментарии: 3
7 years ago

@webhive Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.

Но у меня такая же нога, и не болит:

1. Беру project-stub .
2. Создаю папку common.blocks/b1/images
3. Кладу туда картинку common.blocks/b1/images/b1.jpg
4. Создаю файл common.blocks/b1/b1.css
5. Пишу в него

Так что единственный вариант, который могу предложить — опубликуй свой проект на github, попробую разобраться.

7 years ago

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

Вот чорт! Дико извиняюсь тогда за беспокойство — видимо сам где-то накосячил. Буду рыть дальше.

7 years ago

Короче разобрался в чём тут дело. После прочтения форума по этой теме (пути к картинкам) создалось ощущение, что за разворачивание пути до картинок отвечает borschik . В результате прикрутил его но нифига не помогло. Чортов борщ игнорировал пути и ничего не переписывал.

После ответа от @tadatuta попробовал всё сделать на чистом project-stub -е — всё получилось. Мистика! Попробовал вырезать борщ из project-stub . Ничего не поменялось — всё продолжило работать. Вот это уже интереснее. Ну думаю без вариантов — вся эта магия зашита в stylus . Заменил enb-stylus на enb-css в project-stub — всё равно работает. Да как блин так-то. 🙁

В итоге полез ковырять исходники enb-stylus и enb-css . Внутри обоих обнаружил postcss с плугином postcss-url . Вот блин и вся магия.

В моём тестовом проекте (который не работал) как раз использовался postcss . Добавил туда

plugins : [ . require('postcss-url')(< url: 'rebase' >), . ] 

и всё заработало.

В общем всё больше прихожу к выводу, что postcss заруливает все остальные технологии. Один хрен без него остальные плугины не работают, поэтому не вижу смысла ни в enb-css ни в enb-stylus — оба заменяются одним postcss — ом, к которому кстати можно прикручивать дополнительные парсеры.

background-image

Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Синтаксис

background-image: url(путь к файлу) | none | inherit

background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*

Значения

url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
.
  

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundImage

Браузеры

Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.

Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

HTML5 CSS2.1 IE Cr Op Sa Fx

        
 
1
2
3
 
 
  

Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).

Рис. 1. Повторение фона для каждой ячейки

Рис. 2. Фон для всей строки