Background-Image in <img> element

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 :-)

---

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>

---

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).

---

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?

---

background-color:red; is being superseded by background:.

Combine your backgrounds. You can then refine it further by removing the quotes in the URL() of the background and the period from the URL. if it is relative to the location of the page it is on just remove the backslash.

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

Last if you need to have an alt attribute its contents will show up since there is no source. Use a transparent image if you add the alt.

---

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