CODEWITHSUNDEEP
htmlcss
Patrik
Patrik

Reputation: 1129

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

Upvotes: 13

Views: 108297

Answers (5)

chaiboy
chaiboy

Reputation: 165

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.

Upvotes: 1

Rocket Ronnie
Rocket Ronnie

Reputation: 1116

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>

Upvotes: 12

Shikiryu
Shikiryu

Reputation: 10219

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

Upvotes: 0

Jack Franklin
Jack Franklin

Reputation: 3765

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?

Upvotes: 1

Quentin
Quentin

Reputation: 943563

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

Upvotes: 3

Related Questions