loading media file from css

Question

I'm new to magento (using it from only 1 weeks) and I'm trying to use the following instruction from a css file located in

skin/frontend/responsive/<storeViewName>/css/<MyDevName>/slideShow/mySlideShow.css

which I think is the good place and practice. I'm using the following instruction for which I have an issue:

.mySlider {        
    background-image: url(<media_base_url>/arlian/slideShow/loading_icon/ajax-loader.gif) !important;        
}

I have stored my loader img also where I think it is the right place to do so (but I may be wrong):

media/arlian/slideShow/loading_icon/ajax-loader.gif

My issue is how can I reference the correct path to ajax-loader.gif into the css file ? I know I can use Mage::getBaseUrl('media') from a php/phtml file and {{media url='....'}} from CMS/static html but despite all my google search, I didn't find any way to reference the media path in Magento style to be used in a css file.

May someone tell me how to do that or what is the good practice to achieve this if my approch is wrong in the magento world ?

Answer 1

As per my knowledge there is no Magento way you can do this.
media folder in Magento is to store media resources like product images, category images, cached images, etc.
If you want to use your image in a CSS file then it is better approach to put them inside your skin_image folder. e.g. skin/frontend/responsive/<storeViewName>/images/<MyDevName>/slideShow/loading_icon folder.
And use this in your CSS file like,

.mySlider {        
    background-image: url(../../../images/<MyDevName>/slideShow/loading_icon/ajax-loader.gif) !important;        
}