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

Проблема довольно банальна — ссылка на картинку блока из 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 Правильный вариант — это как раз тот, про который ты пишешь, что он работать отказался.

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

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

Так что единственный вариант, который могу предложить — опубликуй свой проект на 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 — ом, к которому кстати можно прикручивать дополнительные парсеры.

Не работает ссылка на картинку

Есть основная папка HTML: в ней наша веб-страничка, картинки, фон сайта , файл style.css. В уроке мы создали папку CSS куда перенесли файл Style, следовательно, картинка (фон блока #block1) background-image перестала работать. Для нее прописала путь уровнем выше, как было показано — background-image: url(‘../42-fon-dlya-sayta.png’); пересохранила проект, но картинка (фон) так и не появилась. А в основной папке HTML создался еще один файл style.css. Возможно из-за него не работает. Проверяла несколько раз все, удаляла дубль style, не помогает

КОД1 Моя первая страница

Главная

Работы

О нас

Блог

Контакты

Самый главный заголовок

Заголовок поменьше

Самый маленький заголовок-->

Обычный текст
здесь

Обычный текст тут

Сайт рыбатекст поможет дизайнеру, верстальщику, вебмастеру сгенерировать несколько абзацев более менее осмысленного текста рыбы на русском языке, а начинающему оратору отточить навык публичных выступлений в домашних условиях. При создании генератора мы использовали небезизвестный универсальный код речей. Текст генерируется абзацами случайным образом от двух до десяти предложений в абзаце, что позволяет сделать текст более привлекательным и живым для визуально-слухового восприятия.

Напишите нам

Орел

Элемент 1
Элемент 2
Элемент 3

Бабочки
- красные
- синие
- зеленые
Шмели
Стрекозы

КОД2 - стили body < background-color: #008B8B; color:white; >h1 < font-size: 35px; color:blue; font-family: arial; /* шрифт */ text-align: center; >.red < color:#FFB6C1; >#block1 < width: 80%; margin: 0 auto; /* блок по центру */ background-image: url('../42-fon-dlya-sayta.png'); padding: 15px; border: 5px solid rgb(58, 161, 144); border-radius: 30px; >u b < color: blue; >menu < list-style: none; margin: 0 auto; >a < text-decoration: none; font-family: Georgia; transition: .5s linear; >.main-menu < display: block; width: 500px; margin: 0 auto 30px; >.two menu < background: #D4E7EE; overflow: hidden; padding: 0; >.two li < float: left; >.two a < display: block; padding: 1em; border-right: 1px solid #B22222; background: rgba(173, 192, 206, .3); color: #29838C; >.two a:hover < background: #B22222 >img < transform: scale(1); transition: 2s all; >img:hover < transform: scale(1.2); >.img-center

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

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

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

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

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

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

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

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

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

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

Пути в кастомных свойствах. История одного бага

В недавнем выпуске «Веб-стандартов» обсуждались релиз-ноуты Safari TP 133, среди которых оказался интересный фикс. О нём рассказал Никита Дубко:

Беда была в том, что CSS-переменные работали не так: если вы в CSS-переменную задаёте URL, то он резолвился относительно HTML-документа. Оказывается, эта история связана с тем, как работают CSS-переменные. В Safari починили, или скорее поменяли это поведение, и теперь CSS-переменные точно так же резолвятся относительно URL стилевой таблицы — вполне себе ожидаемая штука.

Поведение действительно поменяли, но если сказать точнее — скорее исправили ошибку, ведь в других браузерах всё работало по-другому, согласно спецификации. А ещё всё намного сложнее, чем кажется. Но начнём с начала.

История фикса Скопировать ссылку

Несколько месяцев назад я узнал (не без помощи Руслана Берендеева), что в WebKit функция url() в кастомных свойствах резолвится не так, как ожидается, в отличие от движков Gecko (Firefox) и Blink (Chrome). Я нашёл уже давно заведённый баг 200092 — в нём была тишина, которую я и не надеялся расшевелить. Оставил этот баг на несколько месяцев, пока в него не заглянул Вадим Макеев. И, оказывается, там отвечают ��

Тогда я решил посмотреть, как теперь дела обстоят с этим багом, и с удивлением обнаружил, что в заброшенной ветке сломанные пути починились, но почему-то не везде. Разница в коде небольшая, но существенная. Вдобавок оказалось, что надо учесть ещё одну особенность, шлейфом тянущуюся из уже исправленного на тот момент бага 198512, из которого в уже знакомый мне баг пришли Вадим и разработчик WebKit Дарин Адлер. Обе эти особенности кода обозначу ниже.

Для прояснения ситуации я решил собрать тест, максимально совпадающий с описанием из заметки в спецификации, на которую сослался Дарин.

Например, относительные URL-адреса в CSS сопоставляются с базовым URL-адресом таблицы стилей, в которой объявляется значение. Однако, если кастомное свойство, к примеру, —my-image: url(foo.jpg) объявляется в таблице стилей /a/style.css, оно не будет немедленно преобразовано в абсолютный URL-адрес; если эта переменная позже будет использоваться, например background: var(—my-image) , в другой таблице стилей /b/style.css, то она преобразуется в путь /b/foo.jpg.

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

Но оказалось, что я заметку понял как описание того, как это должно работать, а Дарин — как не должно. В итоге, до выяснения правильного поведения, ни о каких правках в коде не могло быть и речи. Подход правильный, надо было разобраться. Понимая, что со своим так-себе английским могу не замечать какого-то нюанса в формулировке, я стал просить помощи известных мне гуру спецификации. И таки помог «человек-спека» — Илья Стрельцын. Он заметил, что вообще-то этот баг про регистрируемые кастомные свойства, которые:

Передаются не как токены, а уже как обработанные значения.

Кажется это вывело из тупика, оживилось обсуждение, в результате которого, чтобы не менять этот, Дарин открыл новый баг 230243, про взаимоотношения URL уже с обычными кастомными свойствами. Исправил и закрыл. Дело за отгрузкой этого исправления в Safari.

Тест работы путей с кастомными свойствами Скопировать ссылку

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

Обычное (не регистрируемое) кастомное свойство объявляется в стилевом файле в одной директории /a/style.css:

.test

А используется оно в другой /b/style.css :

.test

Этот вариант я назвал inside, где url() находится внутри кастомного свойства.

Но Дарин с Вадимом пришли из бага, пример кода в котором можно назвать beside, где url() не в кастомном свойстве, а просто рядом, через пробел от var() с кастомным свойством, в котором может быть вообще любое значение, например цвет:

.test

И раз уж возможно такое, то нельзя исключать и вариант outside, где var() находится от url() вообще в соседнем (через запятую) значении множественного значения.

.test

Но и это ещё не всё. Упомянутое ранее небольшое, но существенное, отличие в коде, которое ломало разрешение пути — это всего лишь форма свойства, в значении которого применяется путь. Представленные выше варианты используют сокращённую форму свойства, и все их можно назвать shorthand. Для beside возможен только такой вариант. Но остальные сценарии возможны и с отдельными (не сокращёнными) формами свойства — longhand. В таком случае inside выглядит так:

.test

Вариант outside выглядит вот так:

.test

Во всех случаях url() содержит путь до файла без переходов по директориям url(‘foo.svg’) . И во всех случаях он должен резолвиться в путь /b/foo.svg, по которому находится изображение:

Для inside стоило предусмотреть разрешение пути по месту объявления кастомного свойства, то есть в путь /a/foo.svg, поэтому там я разместил изображение:

И остаётся последнее из возможных разрешений пути — рядом с HTML-страницей /foo.svg:

Вся структура проекта выглядит так:

├─ a │ ├─ foo.svg │ └─ style.css ├─ b │ ├─ foo.svg │ └─ style.css ├─ foo.svg └─ index.html

А вот и сам тест во фрейме или, если удобно, на отдельной странице.

До 14-й версии в Safari все пять сценариев теста фэйлились. Начиная с 14.1 — все варианты теста с shorthand стали проходить успешно (видимо это и был фикс бага 198512), но оба longhand — фейлятся.

Напомню, что этот тест касается только обычных кастомных свойств. Если ещё не запутались в этом всём, то попробуйте угадать, в какое изображение должен резолвиться путь в каждом из сценариев, если обычное кастомное свойство заменить регистрируемым.

Думаю, если повнимательнее присмотреться, например, к коду сценария longhand + outside, то станет понятно, что разрешение пути до /foo.svg ну никак не может считаться нормальным поведением движка браузера. Это очевидная ошибка. Поэтому всё-таки «починили», а не «поменяли» поведение.

Остаётся лишь дождаться стабильного релиза с этой починкой и с полным успехом в тесте. А также надеяться, что с путями в регистрируемых кастомных свойствах будет всё хорошо. А пока…

Заключение Скопировать ссылку

Напоследок пара советов:

Если вам понадобится заиспользовать url() хотя бы где-то рядом (внутри одного свойства) с использованием кастомного свойства, и тем более url() внутри кастомного свойства — используйте для этого пока, до релиза фикса, сокращённые свойства background и mask , а не отдельные background-image и mask-image .

Не бойтесь писать об ошибках в баг-трекеры браузеров. Написал бы я сразу, а не месяцы спустя, может уже фикс был бы в стабильном релизе. И не просто ждите, когда больной для вас баг вылечат — помогите разработчикам хоть чем-нибудь, информации подробной дайте, или тест соберите (даже ошибочность релизноутов обнаружили, прогоняя этот мой тест).

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