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
– Paulie_D, Commented Mar 3, 2015 at 12:48
Possible duplicate of Is it possible to set the equivalent of a src attribute of an img tag in CSS? — Oleksandr Savchenko
– Oleksandr Savchenko, Commented Aug 29, 2017 at 15:33

Pete · Accepted Answer · 2015-03-03 12:49:45Z

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 3, 2015 at 12:49

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Neophile Over a year ago

Man, you won't believe. I just found that solution myself. Its the box -sizing and padding that would make it work instantaneously.

Neophile Over a year ago

Saw this link and I was like.. booya! css-tricks.com/replace-the-image-in-an-img-with-css

matcygan · Accepted Answer · 2015-03-03 13:05:19Z

23

Here is another dirty hack :)

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

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

answered Mar 3, 2015 at 13:05

matcygan

7251 gold badge5 silver badges10 bronze badges

1 Comment

Seph Reed Over a year ago

This is the closest solution, but it's not possible to side the image.

Saeed sdns · Accepted Answer · 2020-07-11 15:20:18Z

22

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, 2020 at 15:20

Saeed sdns

99610 silver badges21 bronze badges

3 Comments

vikramvi Over a year ago

can you please clarify how to add local url path ? <img class="grow-together-component__bottom-img" src="./images/bg-section-bottom-mobile-1.svg" alt="bottom design">, I want to change to something else from "./images/.." but it is not working

tekHedd Over a year ago

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.

Kyriakos Bekas Over a year ago

@tekHedd I agree. The browser compatibility is also great.

lharby · Accepted Answer · 2015-03-03 13:08:53Z

5

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 3, 2015 at 13:08

answered Mar 3, 2015 at 12:50

lharby

3,3376 gold badges26 silver badges67 bronze badges

1 Comment

lharby Over a year ago

I have added a jsfiddle. Had to add width and height, but it does work.

Collectives™ on Stack Overflow

Replace image src location using CSS

4 Answers 4

2 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related