View source for 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.

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

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.

=== 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:

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

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

<pre>
http://www.mystore.com.au/site/fancy_shadow_n.png
</pre>

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