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+.
+1
A:
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.
Pekka
2010-06-27 15:02:01
i have not got any widget to see the image as all the free ones are downloaded through pear and most of them use the phtml files and the layout files and i want to use the inline css.
prateek
2010-06-27 15:13:22
@prateek you're not making sense to me. What exactly is your problem or question?
Pekka
2010-06-27 15:15:22
i am developing the widget for which i am using the inline css in that i am using images from as above. But my image is not shown on the page. Getting problems with the relative url of the image for the widget.
prateek
2010-06-27 15:22:07
@prateek so what's keeping you from debugging the problem as described?
Pekka
2010-06-27 15:27:19
i am trying it... but not getting it solved. Now trying to use some layout file . can you help?
prateek
2010-06-27 15:38:22
@prateek Where are you stuck? Have you tried determining which URL gets loaded for the background image? Did you use `background-image` just to make sure that isn't the problem? Do you have Firebug so you can watch in the `Net` tab which files associated with your page (Style sheets, images) get loaded and which return an error?
Pekka
2010-06-27 15:42:37
A:
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'
hypertexture
2010-06-27 16:13:34
+2
A:
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>
vrnet
2010-06-28 08:53:46