Replacing An Image (in An Tag) Using Css

I have the following html:

In my media queries css style sheet, I would like to

Solution 1:

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

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

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

Solution 3:

Your code doesn't work because the image in the original <img> tag is a foreground image, which is different from a background image.

So setting the CSS doesn't get rid of the original image. And in addition, although the CSS does work, the background image it displays is shown behind the foreground image.

In order to do this, you need to either have the original image as a background image (ie set using CSS background-image property), or switch to replacing the foreground image in your script. This would involve setting the src attribute:

$('.a img').attr('src','newimage.png');

Solution 4:

you're setting a background of an img element you won't be able to see, because the image defined in its src attribute is covering it

Anyway if both the images are relevant for the context from a semantic point of view, you should not use css to place the second image in place of the first one

Solution 5:

If you put background on an image, the image will simply overlap the background; making the background totally invisible.

The solution is to make the image as a background of an element

Like so: http://jsfiddle.net/PabXF/