Replace image with another image using CSS

Question

A piece of software we have uses a third party vendor to handle the validation errors. We are updating the UI at the moment and want to replace the image currently displayed with our own custom image.

I am able to target the image using CSS however the current image is still displaying over the new image.

Heres my HTML

<td >
<img src="warning.gif" border="0">
</td>

My CSS

td img {
    background-image: url("required.png")!important;
}

How can I hide the existing image and show my image just using CSS

Why not simply change the imagesource in the html code? – Marcel Wasilewski Oct 23 '15 at 15:20 — Marcel Wasilewski, Oct 23 '15 at 15:20
this works with CSS -> `content: url("required.png")` – Andrew Evt Oct 23 '15 at 15:25 — Andrew Evt, Oct 23 '15 at 15:25

Andrew Evt · Answer 1 · 2015-10-23T15:25:54.103

3

Try to use content:url("required.png")

full CSS code:

td img {
    content: url("required.png");
}

edited Oct 23 '15 at 15:25

answered Oct 23 '15 at 15:20

Andrew Evt

3,613
1
19
35

this code have issue: it doesn't work in FF and IE -> http://stackoverflow.com/questions/12262118/content-url-is-not-working-in-firefox and you need to use pseudoelements instead! Check @j08691 comment, it must work fine! – Andrew Evt Oct 23 '15 at 15:51

score 1 · Answer 2 · answered Oct 23 '15 at 15:20

<div class="header">
    <img class="banner" src="//notrealdomain1.com/banner.png">
</div>

/* All in one selector */
.banner {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
    width: 180px; /* Width of new image */
    height: 236px; /* Height of new image */
    padding-left: 180px; /* Equal to width of new image */
}

Source + extra explanation: CSS Tricks

score 1 · Answer 3 · answered Oct 23 '15 at 15:24

You can use the :after pseudo-element:

td:hover::after {
    content:url(http://placehold.it/350x150/888/333);
}
td:hover > img {
    display:none;
}

<table>
    <tr>
        <td>
            <img src="http://placehold.it/350x150/333/888" border="0">
        </td>
    </tr>
</table>

Replace image with another image using CSS

3 Answers3