CODEWITHSUNDEEP
htmlcss
Ctea Ctea
Ctea Ctea

Reputation: 167

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

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?

Upvotes: 12

Views: 37137

Answers (7)

Amir shayan
Amir shayan

Reputation: 1

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

Upvotes: -1

Musawar ahmed
Musawar ahmed

Reputation: 82

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

Upvotes: -1

s4nji
s4nji

Reputation: 455

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/

Upvotes: 0

Michal Klouda
Michal Klouda

Reputation: 14521

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

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

Upvotes: 24

Spudley
Spudley

Reputation: 168843

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

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123428

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

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 73045

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.

Upvotes: 3

Related Questions