Geek Answers Handbook

Background image in the <img> element

Can someone help me find my problem? I have <img /> and will give it a background image in the <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" />

The background color didn’t work ... :-( My example is a JavaScript string, which is why I avoid URLs

Thanks for the help: -)

+7
html css
source share
5 answers

you don’t even need quotes.

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

use div if you can

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

You escape your quotes and carry the second mark and parentheses.

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 notes in the comment, your src attribute is missing. I believe setting a background image to an image with a translucent background will work, but if you don't have a content image, don't use the <img> element (and don't hide any content images that you have in in the background-image properties).

+3
source share

I don’t understand why you are avoiding 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" />

It works?

And you are sure of that. in the url?

+1
source share

background-color:red; is replaced by background:

Combine your backgrounds. You can then refine it by removing quotes in the background URL () and period from the URL. if it concerns the location of the page on which it is located, simply 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 be displayed, since there is no source. Use a transparent image if you add alt .

+1
source share

Well, even if it’s weird to use the <img/> for this. (this is not his goal, use src or div with background ...)

Here , he works

0
source share

More articles:


All Articles