Ссылка на фоновое изображение относительно стилиста

Question

Я кодирую этот сайт Wordpress http://searchanddevelop.ca/adv/, где у меня есть таблица стилей, в которой я часто ссылаюсь на внешние фоновые изображения.

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

Нажмите на страницу в URL-адресе, который я привел, и вы увидите, что я имею в виду.

.area-heading { 
    background: url('../../../images/titlechevron.png') no-repeat left; 
    margin: 2px 0 11px 2px; 
    height: 16px; 
    } 

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

Каков наилучший способ связать мои изображения относительно здесь? Я чувствую, что мне не хватает основной концепции.

Answer 1

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

Как правило, я создаю папку под названием «изображения» и помещаю ее в папку темы. Затем, чтобы ссылаться на изображения, я мог бы использовать (в таблице стилей) url ('images/photo.jpg') и т. Д.

Файл темы будет содержать все необходимое для темы, все ваши стили, изображения, & темы файлы вместе.

Answer 2

Во внешней таблице стилей предполагается, что все относительные URL-адреса будут относиться к документу CSS.

/styles/screen.css 
/images/foo.png 

Если screen.css хочет использовать foo.png в качестве фонового изображения, он будет ссылаться следующим образом:

.foo { 
    background: url(../images/foo.png); 
} 

При использовании относительных URL-адресов, вы не можете пойти вокруг перетасовки ваш CSS-файлы без изменения путей в этих файлах.

Похоже, вы нуждаетесь в тестовой среде, где структура ваших активов идентична структуре вашего сайта. Такая среда может быть создана путем настройки веб-сервера на вашем настольном компьютере (я лично использую виртуальную машину с UNIX на моем рабочем столе для своего веб-сервера), но это выходит за рамки этого вопроса. Также может работать настройка символических ссылок на ваши активы в вашем «тестовом» каталоге.