Use uploaded images in uploaded CSS

Question

Unable to reference uploaded image files inside an UPLOADED css file.
For example in UPLOADED css file:
.LeftTabForeSlant { background-image: url(#APP_IMAGES#my_image.gif) };
Have also tried WORKSPACE_IMAGES(after moving image file) and have tried it as a quoted string inside parens.
Any ideas?

Answer 1

Absolutely! The idea is to create classes for styles will be used on multiple pages. You put these classes in your css which is included in your page template. Like images, modern browsers will cache your css on the first page view and used the cached version for subsequent page views. I've used this exact technique throughout HTML DB to reduce the page size. On average I was able to cut the size of a page in half. This translates to faster loading pages.
To maximize the benefits of this technique, learn css selectors. CSS selectors allow you to modify the style of additional attributes of the page without adding any additional text. The following is an example:
Example 1 CSS:
table.ex1{border:1px #888888 solid;}
td.ex1Cell{color:#ff0000;}
a.ex1Link:link{color:#0000ff;}
a.ex1Link:visited{color:#0000ff;}
a.ex1Link:hover{color:#00ff00;}
Example 1 HTML:
<table class="ex1"><tr>
<td class="ex1Cell">Some Text.<a class="ex1Link">A link</a></td>
</tr></table>
Example 2: CSS
table.ex1{border:1px #888888 solid;}
table.ex1 td{color:#ff0000;}
table.ex1 td a:link{color:#0000ff;}
table.ex1 td a:visited{color:#0000ff;}
table.ex1 td a:hover{color:#00ff00;}
Example 2 HTML:
<table class="ex1"><tr>
<td>Some Text.<a>A link</a></td>
</tr></table>
Notice how much smaller the HTML was in example 2? The second line of the css in example says:
Any td that is a child of a table with class=ex1, make the font red. This means I don't have to apply "class=..." to so many elements, thus cutting down on the size of my page.
For further reading check out:
http://htmldog.com
http://www.w3schools.com
Good luck,
Tyler