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

Почему 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 в CSS

Мучаюсь уже несколько часов,пробовал прописывать это свойство отдельно т.е. через background-image,background-repeat и т.п.
Правильность пути так же проверял
Пробовал так же под отдельный класс это прописывать
В чём подвох, форумчане?

Лучшие ответы ( 1 )

Здесь вы можете заказать любую студенческую или школьную работу.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Перестал работать css, никак не работает свойство background-image
Неожиданно перестал работать css,просто никак не работает свойство background-image(вместо.

Не работает свойство background
Почему фоновый рисунок не устанавливается в нижний правый угол для sidebar? Я же прописываю.

Почему не работает в адаптации под другие разрешения, свойство background: url
Почему обрезает половину, как только размер изменятся до 768 пикселей Я даже картинку уменьшил.

Не срабатывает свойство background-image в IE
Всем привет. При верстке не отображается картинка, заданная с помощью свойства background-image.

154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351

background: url(img/p1.jpg) no-repeat 50% 50%; background-size: cover;

3324 / 2844 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170

Сообщение было отмечено Никитка98 как решение

Решение

Сообщение от Никитка98

Правильность пути так же проверял

Сомневаюсь. И кстати, правильный путь включает в себя и точное указание имени директории/файла. Когда будете перепроверять, не забудьте про это.

83 / 74 / 22
Регистрация: 02.07.2013
Сообщений: 606

это весь ваш css код?
если что? то у меня код работает при верном указании адреса картинки.

возможные причины косяка
1 неверно указан адрес картинки
2 вы неправильно прилепили css файлик к html коду
3 ваш браузер отображает старый вариант страницы и не хочет ее обновлять.
возможно косяк совершенно неожиданный и непредвиденный для меня? например картинка корявая.

попробуйте творчески подойти к поиску ошибки, например попробуйте вместо фона-картинки сделать однотонный фон.
если вы неверно указали урл, то фон появиться,если фон не появиться, то вообще ваш css фаил не переварился.
кстати вы в какой среде верстаете?

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Свойство background-color вынести за рамки блока
Есть страница, что называется в "рамке". Есть необходимость растянуть background-color некоторых.

CSS background
Здравствуйте у меня такой вопрос, сделал всё по этой схеме. html, body < .

Background CSS
наверно, проблема пустячковая, но для меня пока неразрешимая. 3й день разбираюсь в HTML и CSS по.

background из внешнего .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 серебряных знаков 66 66 бронзовых знаков

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

22 фев 2014 в 16:38

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

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

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

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

Отслеживать
68k 219 219 золотых знаков 79 79 серебряных знаков 221 221 бронзовый знак
ответ дан 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.

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

Не работает background-image в CSS

Содержимое папки с проектом: в папке лежат html и css файлы, создана дополнительная папка images, в которой лежит файл intro.jpg.
То есть путь указан правильно, но почему картинка не отображается?

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

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

Уверен, что путь указан правильно?)

пользуйтесь инспектором: там найдите на нужном блоке это свойство и попробуйте открыть этот файл как картинку в новой вкладке, если ОК, то значит прописать размеры блоку

но вообще стили должны быть в отдельной папке и путь тогда будет другой, через ../

Если пытаешься так указать фон диву, то ему еще надо указывать размеры (если в нем нет текста или др. содержимого).