Background-Image in <img> element

Question

Hey somebody,

Can someone help me to find my Problem ? I have a <img /> and will give him a background-image within a <a> tag.

Here is my example:

<img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url(\'./images/system/button/close/close.png)\' no-repeat" />

Background-Color didn't work to.. :-( My Example is a JavaScript String, thats the reason why I'm escaping the URL

Thank's for help :-)

Answer 1

You are escaping your quote marks and have transposed the second quote mark and bracket.

In CSS:

url('foo')   /* is technically fine but broken on IE/Mac */
url(foo)     /* is fine */
url('foo)'   /* is not fine */
url(\'foo\') /* is not fine */

And as Ross points out in a comment, your src attribute is missing. I imagine that setting a background-image on an image with a translucent background will work, but if you don't have a content image, don't use an <img> element (and don't hide any content images you do have in in background-image properties).

Answer 2

Don't understand why you are escaping the quotes.

 <img border="0" style="display:block; width:20px; height:20px; background-color:red; padding:9px; background:url('./images/system/button/close/close.png') no-repeat" />

Does that work?

And are you sure about the . in the URL?

Answer 3

you dont even need the quote marks.

background:url(./images/system/button/close/close.png)

use a div if you can

<div style="height:20px; width:20px; padding:9px; background:url(./images/system/button/close/close.png) no-repeat red"></div>

Answer 4

Why do you even need to set the background image? Wouldn't <img src="filename.gif"> work just as well?

Answer 5

Well, even if it's weird to use the <img/> tag for this. (it's not its purpose, use src or a div with background...)

Here, it's working