Convert html img tag to css

Question

How do I convert and img tag to css so I don't have to have a million img tags. Or whats the best way todo images with css

<img src="hg-rx.gif" name="foo" width="18" height="18">

I tried background:url in css and it needs text for it to display properly, id hilight and the image would disappear

.hg-text-rx {
  background:url(hg-rx.gif);
  background-repeat: no-repeat;
  position: relative;
 }

`img` elements are supposed to be semantic markup. If you had previously used them for structural markup, and are now moving to using CSS: congratulations! — zzzzBov, Mar 04 '11 at 19:58
@zzzzBov - but if he is replacing actual content images with CSS, then that is not a good thing. — Charles Boyung, Mar 04 '11 at 20:00
What @Charles says. For actual content, this has several massive downsides outlined [here](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) - most prominently, browsers won't print them any more. There is nothing wrong with having a million `img` tags if you have a million actual images — Pekka, Mar 05 '11 at 10:45

score 1 · Answer 1 · answered Mar 04 '11 at 20:08

You can do this with just css by using a div or other block element of fixed width and height and make the image the background of that. But to do this, you must still put the div (for the image) in the HTML so you aren't really cleaning anything up, unless you are just trying to make the site easier to skin completely using CSS. However, this does make rollover states a breeze.

div#hg-rx {
display:block;
width:18px;
height:18px;
background: url(hg-rx.gif) 0 0 no-repeat transparent;
}

<div id="hg-rx"></div>

If you are doing borders, rounded corners or buttons you might want to look into sprites. http://css-tricks.com/css-sprites/

score 0 · Answer 2 · answered Mar 04 '11 at 19:57

0

you can add a image as background in css, but you must set the width and height of image to be visible.

css

.hg-text-rx {background:url("http://dummyimage.com/200x200/000/545");width:200px;height:200px};

Demo: http://jsfiddle.net/2XX8A/

answered Mar 04 '11 at 19:57

Sotiris

38,986
11
53
85

Dutchie432 · Answer 3 · 2011-03-04T20:12:51.347

0

Actually, while this cannot be done strictly in CSS, if you have IMG tags and want to convert them to divs, you can do so using jQuery (a javascript wrapper) on the fly pretty easily.

LIVE DEMO http://jsfiddle.net/Epgvc/4/

HTML

<img src='http://dummyimage.com/200x200/000/fff&text=image1' />
<img src='http://dummyimage.com/100x100/f00/ff0&text=image2' />
<img src='http://dummyimage.com/250x50/0ff/fff&text=image3' />

JS

$('img').each(function(){
    var html="<div style='border:1px solid #ff0;width:" + $(this).width() + "px;height:" + $(this).height() + "px;background:url(" + $(this).attr('src')+ ");color:#fff;'>This is a Div!</div>"
    $(html).insertBefore($(this));
    $(this).remove(); //Comment out this line if you want to leave the original image
});

edited Mar 04 '11 at 20:12

answered Mar 04 '11 at 20:05

Dutchie432

28,798
20
92
109

I couldn't see a JavaScript tag, let alone a jQuery one..? – David Thomas Mar 04 '11 at 20:10
Well, if he's talking about actually "Converting" images to divs using CSS, then this is the way to do it. Perhaps the question is poorly phrased and I should be more clear in my answer. – Dutchie432 Mar 04 '11 at 20:12

score 0 · Answer 4 · answered Mar 05 '11 at 10:43

If you intent on having the image as a background to a text field you could alway use text-indent

.hg-text-rx {
  background:url(hg-rx.gif);
  background-repeat: no-repeat;
  position: relative;
**text-indent:-10000px;**
 }

<p>this text wont show, but the image will</p>

However there is conflicting arguments about this technique from a seo point of view

Convert html img tag to css

4 Answers4