Как прописать путь к картинке в css

Добавление рисунка

Для добавления изображения на веб-страницу используется тег , атрибут src которого определяет адрес графического файла. Общий синтаксис добавления изображения будет следующий.

URL (Universal Resource Locator, универсальный указатель ресурсов) представляет собой путь к графическому файлу. Для его указания можно использовать как абсолютный, так и относительный адрес. Далее рассмотрим несколько разных путей к графическому файлу для размещения его на веб-странице. Для примера возьмем файл с рисунком, который называется sample.gif и хранится в папке images корня сайта.

• Если в начале адреса стоит слэш (символ /), это значит, что отсчет идет от корня сайта. Например, адрес сайта — http://baklan.narod.ru, значит, написав путь к изображению как /images/bird.jpg , мы, тем самым говорим серверу, что показать следует файл http://baklan.narod.ru/images/bird.jpg. Учтите, что подобные ссылки со слэшем впереди работают только на веб-сервере, на локальном компьютере они действовать не будут.
• Если перед адресом добавляется упоминание протокола http ( http:// ), то речь идет об абсолютной ссылке. Изображение всегда будет загружаться с указанного адреса в Интернете, даже при сохранении веб-страницы на локальный компьютер.
• Двоеточие со слэшем (../) в начале адреса говорит о том, что и рисунок и веб-страница находятся в разных папках, которые размещены на одном уровне. На рис. 10.1 показан файл index.html, в который требуется поместить рисунок pic.gif. Тогда относительный путь к изображению из index.html будет ../images/pic.gif . Возможны случаи хранения файлов, что обращение из одного файла к другому превращается в набор двоеточий, например: ../../../images/pic.gif .

Рис. 10.1. Пример размещения файлов

• Имя папки в начале пути, без всяких слэшей и двоеточий, сообщает, что и текущий файл и папка с изображением находятся на одном уровне. Как показано на рис. 10.2, относительный путь к рисунку pic.gif из файла index.html будет images/pic.gif .

Рис. 10.2. Пример размещения файлов

В примере 10.1 показано несколько способов добавления рисунка на веб-страницу.

Пример 10.1. Вставка изображения в документ

Как правило, в качестве формата графического файла выступает GIF и JPEG.

Путь к файлу в background-image: url

Я испробовал два — не работают. Если фоновый рисунок находится в одной папке с style.css и написав background-image: url(pushkin.gif); — все работает. Может, дело в каталогах?

/lib/ /css/ /img/ 

P.S. файл *.css подключен, все работает кроме графики.
Отслеживать
8,657 18 18 золотых знаков 73 73 серебряных знака 181 181 бронзовый знак
задан 22 сен 2011 в 19:55
Monstrs-Inc Monstrs-Inc
232 1 1 золотой знак 4 4 серебряных знака 14 14 бронзовых знаков

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

Да, дело в каталогах, файл ищет от текущего каталога, чтобы подняться на уровень выше, нужно написать две точки: ../ .
Например:

Путь означает что нужно подняться в родительский каталог, зайти в папку img и найти файл pushkin.gif .

Отслеживать
ответ дан 22 сен 2011 в 20:04
706 3 3 серебряных знака 14 14 бронзовых знаков
Не работает. Ставил одну точку, две и три — по нулям. (((
22 сен 2011 в 20:08
Извиняюсь — работает. Забыл lib убрать. Суппер. Большое спасибо
22 сен 2011 в 20:10
А если надо на два каталога подняться?
22 сен 2011 в 20:18

супер?О_о перенесите html файл и этот стиль уже не будет работать, если вам это неважно то тогда конечно — вперед, но лично я всегда все url’ы (как в css так и вообще где угодно) прописываю от корня чтобы рассположение html страницы никаким образом не влияло на работу css..
Ну да не суть, на вкус и цвет фломастеры разные.

Как правильно прописать путь до картинки в css?

Есть следующая структура файлов и папок.
В firebug показывает, что css подключен, но сам файл с изображением не доступен. Как правильно прописать путь для файла tel-1.png чтобы он отобразился в файле index.html
Путь ../dist/img/tel-1.png не работает

• Вопрос задан более трёх лет назад
• 18783 просмотра

Комментировать

Решения вопроса 1

Помог ответ? Отметь решением.

../../dist/img/tel-1.png

Ответ написан более трёх лет назад

Нравится 2 6 комментариев

ayapergenov @ayapergenov Автор вопроса

ayapergenov: пожалуйста )) С новым годом вас!

ayapergenov: кстати simplyv тоже самое ответил

ayapergenov @ayapergenov Автор вопроса

Алексей Ярков: Благодарствую!

Gtsk415, на здоровье ))

Ответы на вопрос 2

путь к картинке должен быть не относительно страницы на которой будет отображаться, а относительно файла CSS.
скажем для страница лежит в корне, файл CSS в папке CSS, а картинка в IMAGES.
адрес в CSS будет background: url(../images/bg.png);

Ответ написан более трёх лет назад

Комментировать

Нравится 4 Комментировать

смотря где картинка есль в той же папке то tel-1.png если нет то попробуй ./papka/tel-1.png

Ответ написан более трёх лет назад

ayapergenov @ayapergenov Автор вопроса

Отредактировал вопрос. Посмотрите по ссылке скриншот и мой вариант пути

вот посмотри тут https://css-tricks.com/quick-reminder-about-file-paths/

Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +1 ещё

Как пофиксти проблему с амперсантом?

• 1 подписчик
• 11 часов назад
• 54 просмотра

Как прописать путь к картинке в css

есть блок ‘someBlock’ в нём элемент ‘elem1’ в нём блок ‘image’, картинка image.svg

получается такая вот файловая структура desktop.bundles |-index | |-. |desktop.blocks | |-image | |-someBlock | | |-__elem1

вопрос: куда положить файлик image.svg чтобы всё было по уму? если положить в папку с бандлом то безусловно работает, но что-то мне подсказывает что надо делать как то по другому, логично что картинка должна лежать где-то в /desktop.blocks/someBlock/__elem1, тогда не понятно как обратиться к этой картинке в attrs: чтобы она нашлась?

Комментарии: 18
9 years ago

Если картинка — часть оформления, то проще добавить в папку блока через стили. Если картинка — часть контента, можно просто прописать полный путь к ней. Уже не суть важно где она лежит. У меня это папка media в корне проекта. Если это на CMS какой то будет, то будет из БД просто url вставляться.

9 years ago

картинка есть часть оформления, и в том и был вопрос, если делать как часть оформления и на уровне переопределения блока image её положить, то как это будет выглядеть в коде? куда надо ссылаться в attrs: .

9 years ago

@sosnovskyas Для правильного рерайта урлов следует использовать borschik.

Схема примерно такая:

1. В корень проекта кладется конфиг .borschik (имя начинается с точки). Например, такой:

заинлайнит все картинки прямо в CSS.

1. В конфиге сборки добавляется дополнительный этап либо по предобработке bemjson.js, либо по постобработке HTML (по аналогии с CSS/JS).
2. После этого может потребоваться запустить enb make clean , чтобы сбросить кэш.

9 years ago

@sosnovskyas если картинка часть оформления, её не надо вставлять как image, а прописывать в css как background.

И использовать borschik для фриза статики в css.

9 years ago

а где почитать про предобработку bemjson.js не дадите ссылочку? а то что то google не подсказывает (

8 years ago

@sosnovskyas обработка bemjson.js ничем не отличается от обработки любого другого JS-файла.

Расскажу чуть подробнее, чтобы объяснить идею.

borschik — это тул, который умеет запускать так называемые «технологии» — собственные модули, работающие каждый со своим форматом файлов (например, *.css или *.js ). Технологии умеют всего 2 вещи: include (заменить путь до файла на его содержимое) и link (правильно преобразовать путь).

В данном случае нужен link для технологии css . Документация на него тут, но все сводится к тому, что вызов borschik.link(‘path/to/file’) будет зафрижен в соответствии с конфигом.

Конкретно для фриза bemjson.js на примере project-stub и сборки на ENB потребуется вот такой дифф в make.js:

diff --git a/.enb/make.js b/.enb/make.js index 8c226f3..d23b882 100644 --- a/.enb/make.js +++ b/.enb/make.js @@ -41,7 +41,8 @@ module.exports = function(config) < // essential [enbBemTechs.levels, < levels: levels >], [techs.fileProvider, < target: '?.bemjson.js' >], - [enbBemTechs.bemjsonToBemdecl], + [techs.borschik, < sourceTarget: '?.bemjson.js', destTarget: '_?.bemjson.js', freeze: true, minify: false >], + [enbBemTechs.bemjsonToBemdecl, < source: '_?.bemjson.js' >], [enbBemTechs.deps], [enbBemTechs.files], @@ -58,7 +59,7 @@ module.exports = function(config) < // bemhtml [techs.bemhtml, < devMode: process.env.BEMHTML_ENV === 'development' >], - [techs.htmlFromBemjson], + [techs.htmlFromBemjson, < bemjsonFile: '_?.bemjson.js' >], // client bemhtml [enbBemTechs.depsByTechToBemdecl,  

module.exports = function (bh) < bh.match('grid__cell_format_mode', function(ctx) < var data = ctx.param('data'); if (!data) < return; >ctx.content(< block: 'icon', cls: 'grid__cell_format_mode-link', url: '/common.blocks/grid/__cell/images/' + data + '.png' >); >); 

|desktop.blocks | |-logo | | |-__image | | | | logo__image.css | | | | logo__image.png 

.logo__image < background-image: url(/desktop.blocks/logo/__image/logo__image.png); >

desktop.blocks/ logo/ logo.css logo.png desktop.bundles/ index/ index.bemjson.js 

.logo

< block: 'page', styles: [< elem : 'css', url : 'index.css' >], scripts: [< elem : 'js', url : 'index.js' >], content: [ < block: 'logo' >] > 

var stylusTech = require('enb-stylus/techs/stylus'), FileProvideTech = require('enb/techs/file-provider'), bemTechs = require('enb-bem-techs'); module.exports = function(config) < config.node('bundle', function(node) < // Получаем имена файлов (FileList) node.addTechs([ [FileProvideTech, < target: '?.bemdecl.js' >], [bemTechs.levels, levels: ['blocks']], [bemTechs.deps], [bemTechs.files] ]); // Создаем CSS-файлы node.addTech(stylusTech); node.addTarget('?.css'); >); >; 

.logo < background-image: url("../../desktop.blocks/logo/logo.png"); >

var stylusTech = require('enb-stylus/techs/stylus'), FileProvideTech = require('enb/techs/file-provider'), bemTechs = require('enb-bem-techs'); module.exports = function(config) < config.node('bundle', function(node) < // Получаем имена файлов (FileList) node.addTechs([ [FileProvideTech, < target: '?.bemdecl.js' >], [bemTechs.levels, levels: ['blocks']], [bemTechs.deps], [bemTechs.files] ]); // Создаем CSS-файлы node.addTech([stylusTech, < url: 'inline' // ); >; 

.logo < background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABPElEQVQ4y2NgGDTg3fdf/LjE+47fLajbf6Nx3vmHCTAxDPX+K89shClABvqzDl9gmHLmP8O0C/8ZJp7877Dg6H75SfsezLvwOAlFof22x6dAChI2nJ8PM/3c8w8GDEse/2dY8w6BF97/z7/mxefzr744oRgw7/bnOrCCOTf+C3TvegcyKH/PzSkomqF4/ZMfFf///+dBMcBhzbWjcEUrX4ENYph55T82A4BABCOwzr/9Eca/4d1nbBqQscGej7exxgLISXWXv8wnZMi8O18acUblviefw/V3vL2Nz3agRRI4DQBK8p97+zMq4OjnQ9g0v//51x5nIgKFukDHtncMnXv/M8y/jaI5/vSXbSDNQAuYcdnMDMQa59//Tqi7+m0hDM+7/6Pz3pc/4SA5nJrRAxKI5ZGwBBCzMwxqAADz8kerOr7ibwAAAABJRU5ErkJggg=="); >

 node.addTech([stylusTech, < url: 'inline' //