Cannot properly replace img with its css equivalent

Question

I don't want to use <img> for things like button icon, error hints etc

Currently, I have this mark-up to render error messages:

<p>
    <img src="/path/to/error.jpg" />An error occurred 1
</p>

<p>
    <img src="/path/to/error.jpg" />An error occurred 2
</p>

It renders, like (pseudo-view)

[img] An error occured 1
[img] An error occured 2

It works exactly the way I want, but the problem is <img> tag, which I don't want to be used at all.

So, I've tried to replace img tag with,

<style>
    #error {
        background-image  : url(../images/error.jpg);
        background-repeat : no-repeat;
        width             : 130px;
        height            : 30px;
    }
</style>

<p>
    <div id="#error"></div>An error occured 1
</p>

<p>
    <div id="#error"></div>An error occured 2
</p>

But it renders, like

[img] 
 An error occured 1
[img] 
 An error occured 2

I've also tried to play with its width and height, added left, but with no luck.

Again - the problem is that,

[img] 
 An error occured

it renders this way with aforementioned #error style.

The question,

I want this with #error css definiton, without img tag to be rendered like this,

[img] An error occured

What else should I add?

Sachin · Accepted Answer · 2013-10-08 10:36:21Z

1

You can play with background-position property. Here is an example for the same

#error {
    background: url(../images/error.jpg) top left no-repeat;
    width: 130px;
    height: 30px;
    padding-left: (width of image);
}

and markup would be

<div id="#error">An error occured 1</div>

Js Fiddle Demo

edited Oct 8, 2013 at 10:36

answered Oct 8, 2013 at 10:29

Sachin

41.1k7 gold badges94 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot properly replace img with its css equivalent

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related