Не появляется картинка background-image?

Question

[Имя Имечко]

Имеется папка style, в ней img и в ней лежит файл header_icon.png.
Вставляю такой код, но картинка не появляется.
background-image: url(style/img/header_icon.png);

Собственно код целиком: codepen.io/anon/pen/ZGLKOY

Comments

[Имя Имечко]

Но если вставить ссылку на http:// и т.п. то картинка появляется.

Answer 1

[Роман]

как вы указали, ваш фал стилей лежит в style/css/style.css,
а изображения в style/img/header_icon.png

в вашем случае вы пытаетесь найти картинку в папке css, так как путь style/img/header_icon.png расчитывает относительно файла style.css. т.е. у вас получается такой адрес для иконки style/css/style/img/header_icon.png
Поэтому поменяйте адрес на ../img/header_icon.png и будет вам счастье

Comments

[Имя Имечко]

Поясните эти точки, что они означают. Я видел пишут одну точку.

[Роман]

Саня: возврат в родительский каталог
читайте об отличии относительного и абсолютно путей
например, www.uamedwed.com/web/absolyutnyj-i-otnositelnyj-pu...

Answer 2

[Ilya Pasyuk]

background-image: url(ваш_путь/изображение.png);
Путь до изображения лежит относительно папки где лежить стиль.css

background-image: url(/ваш_путь/изображение.png);
Путь до изображения лежить относительно корня сайта.

Answer 3

[IJIL]

пробуй
../style/img/header_icon.png
../../style/img/header_icon.png

Comments

[Имя Имечко]

Этот вариант получился...
../../style/img/header_icon.png

Что за ерундовый путь такой? Я тестирую на локалке

Answer 4

[Ilya Korablev]

Попробуйте заменить код на:

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

Проверьте, есть ли вообще такое изображение.
Или Вы загружаете изображение прямо с Codepen?!

Comments

[Имя Имечко]

неа

[Ilya Korablev]

Саня: изменил ответ.
Скиньте ссылку именно на сайт, а не на код CodePen

[Имя Имечко]

Ilya Korablev: сайт ipstest.esy.es
css файл ipstest.esy.es/style/css/style.css