Replacing an image (in an 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?

This has nothing to do with javascript, let alone the javascript library jQuery! — Rich Bradshaw, Aug 27 '12 at 12:56
There are a dozen identical questions on stackowerflow: [link1](http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css/10247567#10247567), [link2](http://stackoverflow.com/questions/694486/replace-image-through-css), ... — Serhii Holinei, Aug 27 '12 at 12:59

score 20 · Answer 1 · answered Aug 27 '12 at 12:57

20

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

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

answered Aug 27 '12 at 12:57

Michal Klouda

14,263
7
53
77

2

I've never used content on img and didn't know that it worked. Thank you @michal-klouda, I've learned something new today. And it is a very elegant solution. – Henrik Ammer Aug 27 '12 at 13:35

score 4 · Accepted Answer · answered Aug 27 '12 at 12:55

4

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.

answered Aug 27 '12 at 12:55

Rich Bradshaw

71,795
44
182
241

score 3 · Answer 3 · answered Aug 27 '12 at 12:56

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');

score 1 · Answer 4 · answered Aug 27 '12 at 12:56

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

score 0 · Answer 5 · answered Aug 27 '12 at 13:03

0

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/

answered Aug 27 '12 at 13:03

s4nji

449
1
6
17

score 0 · Answer 6 · answered Jul 29 '22 at 15:58

.image-replacement {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(https://www.whatsappimages.in/wp-content/uploads/2021/07/Top-HD-sad-quotes-for-whatsapp-status-in-hindi-Pics-Images-Download-Free.gif)
    no-repeat;
  width: 180px;
  height: 236px;
  padding-left: 180px;

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h2>Image replaced with Image</h2>
<img class="image-replacement" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80" />
</body>
</html>

Replacing an image (in an tag) using css

6 Answers6

Linked