Replacing an image (in an <img /> tag) using css

Question

I have the following html:

<div class="A">
    <img src="image1.png" width="100px" height="100px"/> 
</div>

In my media queries css style sheet, I would like to replace that image with another one (image2.png).

What is the css code I need to write?

I tried the following:

.A img
{
   background:url("image2.png") no-repeat;
}

But this doesn't seem correct?

Answer 1

If you are using CSS3, then content is the answer:

.A img
{
    content: url("image2.png");
}

Answer 2

You can't modify that in CSS, instead, use a div like this:

<div id='#theImage'></div>

Then in CSS:

#theImage {
    width:100px;
    height:100px;
    background:url("image1.png") no-repeat;
}

Then you can restyle the div using a media query.