Replace image src location using CSS

Question

I have a website that has an image with a src attribute and I would like to change the src location of that image with an image of my own. The image lives in a div component. I can't change the HTML and am looking ways to change it using CSS only please.

Div component:

<div class="application-title">
<img style="margin-top: 3px;height: 45px;" src="image.svgz">
</div>

Image component(CSS file):

.application-title IMG
{
    float: left;
    margin-top: 5px;
    margin-right: 10px;
    opacity: 1;
    margin-left: 0px;
    visibility: hidden;
}

You may not have access to the HTML...but do you have access to the image file? Why not just overwrite the image with the new one? — Paulie_D, Mar 03 '15 at 12:48
Possible duplicate of [Is it possible to set the equivalent of a src attribute of an img tag in CSS?](https://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css) — Oleksandr Savchenko, Aug 29 '17 at 15:33

score 46 · Accepted Answer · answered Mar 03 '15 at 12:49

46

You can use a background image

.application-title img {
  width:200px;
  height:200px;
  box-sizing:border-box;
  padding-left: 200px;
  /*width of the image*/
  background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;
}

<div class="application-title">
  <img src="http://lorempixel.com/200/200/city/1/">
</div><br />
Original Image: <br />

<img src="http://lorempixel.com/200/200/city/1/">

answered Mar 03 '15 at 12:49

Pete

57,112
28
117
166

2

Man, you won't believe. I just found that solution myself. Its the box -sizing and padding that would make it work instantaneously. – Neophile Mar 03 '15 at 12:51
3

Saw this link and I was like.. booya! https://css-tricks.com/replace-the-image-in-an-img-with-css/ – Neophile Mar 03 '15 at 12:52

score 22 · Answer 2 · answered Mar 03 '15 at 13:05

22

Here is another dirty hack :)

.application-title > img {
display: none;
}

.application-title::before {
content: url(path/example.jpg);
}

answered Mar 03 '15 at 13:05

matcygan

665
1
5
10

1

This is the closest solution, but it's not possible to side the image. – Seph Reed Dec 13 '19 at 17:34

score 14 · Answer 3 · answered Jul 11 '20 at 15:20

14

you can use: content:url("image.jpg")

<style>
.your-class-name{
    content: url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="your-class-name" src="..."/>

answered Jul 11 '20 at 15:20

Saeed sdns

804
7
17

can you please clarify how to add local url path ? , I want to change to something else from "./images/.." but it is not working – vikramvi Jul 07 '22 at 11:51
This should be the starred answer. It directly replaces the image URL as you really want, without offset hacks or other messiness. Can also use other content (like plain text). IOW it's fab. – tekHedd Feb 17 '23 at 17:24
@tekHedd I agree. The [browser compatibility](https://caniuse.com/?search=content) is also great. – Kyriakos Bekas May 25 '23 at 08:14

lharby · Answer 4 · 2015-03-03T13:08:53.040

4

You could do this but it is hacky

.application-title {
   background:url("/path/to/image.png");
   /* set these dims according to your image size */
   width:500px;
   height:500px;
}

.application-title img {
   display:none;
}

Here is a working example:

http://jsfiddle.net/5tbxkzzc/

edited Mar 03 '15 at 13:08

answered Mar 03 '15 at 12:50

lharby

3,057
5
24
56

I have added a jsfiddle. Had to add width and height, but it does work. – lharby Mar 03 '15 at 12:57

Replace image src location using CSS

4 Answers4

Linked

Related