adding image through inline css in magento

Question

i am trying to develop a widget using inline css. Inline css contains the link to the images for example {background:url(../img/transparent.png);} I have copied the folder to the relative folder to it but its not working. Any help please. I am using magento version 1.4+.

Answer 1

If I guess well, you are trying to use some of your skin image "inlined" in your phtml file. The trick is to call the right directory. If I understand well your question, the right answer is :

<div style="background-image: url(<?php echo $this->getSkinUrl('img/transparent.png'); ?>)">Div content</div>

Let's say your skin directory is

/skin/frontend/YOURTHEME/YOURVIEW/

then the above code would be rendered on the frontend with :

<div style="background-image: url(http://YOURDOMAIN/skin/YOURTHEME/YOURVIEW/img/transparent.png)">Div content</div>

Answer 2

to start, use background-image instead of background because

When using the shorthand property the order of the property values are:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

if that doesn't work, try right-clicking the widget in Firefox and choose "display background image". That should give you a hint as to how the relative path gets interpreted, and whether the image is in fact at that location.

Answer 3

i think your problem lies in attempting to reach the image url relatively using '../images/image.jpg'and how that is interpreted by magento in rendering the widget..

why not try an absolute path instead along the lines of '/app/code/local/widget/images/image.jpg'