'Replace image src location using CSS

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;
}
htmlcssimage


Solution 1:[1]

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/">

Solution 2:[2]

Here is another dirty hack :) 

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

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

Solution 3:[3]

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="..."/>

Solution 4:[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/

Solution 5:[5]

The most efficient way is to use the content attribute on the image element.

img {
   content: url(https://your/url/address/image.format);
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Pete
Solution 2 matcygan
Solution 3 Saeed sdns
Solution 4
Solution 5 Martin Veskilt

Related Questions