Specifying the path for image files in stylesheets

You can refer to image files in your stylesheets, and this is most often used when you want to create background images for a particular style.

a.help, a:visited.help, a:active.help {
  background: transparent url('help.png') no-repeat 0px 0px;
}

The url parameter refers to an image file, and for stylesheets this means that the image file will be found in the file system relative to the stylesheet in which it is declared.

This means that if you add a stylesheet which has associated image files, they should all be located in the Theme Assets folder. All the image files will then be in the same location as the stylesheet, and can be referred to as in the above example.

If you wish to use liquid filters in images, it's better to use the asset_url filter as shown below.

a.help, a:visited.help, a:active.help {
  background: transparent url('{{ "help.png" | asset_url }}') no-repeat 0px 0px;
}

Internet Explorer Filters

There is one exception to this rule which applies to Internet Explorer filters.

If you have a filter which includes an image file, specified by the src parameter, then you cannot use the same rules that apply to stylesheets using the url parameter.

For Internet Explorer filters, the src parameter refers to a image file which is relative to the page URL, rather than the folder containing the stylesheet.

In order to locate an image file in the Theme Assets folder, you need to prefix the image name with "/site/" to make create an absolute URL reference to the Theme Assets folder.

Here's an example:

.fancybox-ie #fancybox-bg-n {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/site/fancy_shadow_n.png', sizingMethod='scale');
}

This code refers to the image file using the following example URL

http://www.mystore.com.au/site/fancy_shadow_n.png

The "/site/" prefix has been created to allow direct access to the images in the Theme Assets folder.