Как сослаться на изображение темы в таблице стилей?

Question

Как сослаться на изображение темы в таблице стилей?

19 мая 2015 г., 08:25:43

Просмотры: 46.2K

Голосов: 7

У меня есть глобальный элемент как часть моей темы, и мне нужно добавить изображение в качестве фонового изображения. Мне нужен URL к изображению. Я полагаю, что жестко прописывать URL - это плохая практика, и что URL должен быть относительным к расположению темы. Какой рекомендуемый способ ссылаться на изображение в таблице стилей?

Andrew

419

изображения css urls

Комментарии

Где находится расположение изображения или его нужно загрузить?

m4n0

19 мая 2015 г. 08:28:21

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

Комментарии

У меня не работает, структура такая же

Hidayt Rahman

9 янв. 2018 г. 17:40:43

@HidaytRahman У вас есть демо этого?

m4n0

9 янв. 2018 г. 18:00:08

Да, работает, не работало из-за глупой ошибки, спасибо :)

Hidayt Rahman

10 янв. 2018 г. 17:50:52

Какая же это была глупая ошибка? ;)

m4n0

10 янв. 2018 г. 19:21:51

У меня был пробел в названии изображения, которое я вставлял :(

Hidayt Rahman

11 янв. 2018 г. 15:01:39

У меня возникла проблема с относительностью URL.

Я имею в виду, что при открытии обзора категории из третьей или более глубокой дочерней категории, например:

-nature
--animals
---wolves >>>3-й уровень
--birds

URL для wolves выглядел бы так: /category/nature/animals/wolves/ Из-за этого расположение изображения оказывалось на один уровень директории выше и не отображалось.

Я попробовал это решение, и оно сработало:

.sidebar-row .widget {
  background-image: url("../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../wp-content/uploads/.../image.webp");
  background-image: url("../../../../../../wp-content/uploads/.../image.webp");
}

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

Кстати: Я использую плагин "Simple CSS" для изменения оформления моего сайта.

Frank Belin

11

25 авг. 2021 г. 01:31:06

Комментарии

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

Rup

27 авг. 2021 г. 11:11:21

Для WordPress это должно выглядеть примерно так:

   background:url('../wp-content/themes/yourtheme/images/social-icons-v2-opt.png');

Для дочерней темы

   background:url('../wp-content/themes/yourtheme-child/images/social-icons-v2-opt.png');

Michael C.

1

17 авг. 2020 г. 02:25:31

Комментарии

Директории wp-content и themes можно переименовать. НЕ используйте эти названия в своём коде.

fuxia

17 авг. 2020 г. 04:19:25

Спасибо за уточнение! Да, это не совсем точный код. Именно поэтому я написал "Это что-то вроде этого".

Michael C.

18 авг. 2020 г. 05:30:22

m4n0 1.36K · Accepted Answer · 2015-05-19T08:42:47Z

Это зависит от расположения вашего изображения и таблицы стилей.

Но вот синтаксис:

.theme-image {
  background-image: url('../images/header-img.jpg');
}

Приведённый выше код предназначен для следующей структуры:

wp-content
 - themes
  - your-theme 
    - images
     - header-img.jpg
    - css
     - style.css

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

m4n0

1.36K

19 мая 2015 г. 08:42:47