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 can use a background image
.application-title img {_x000D_
width:200px;_x000D_
height:200px;_x000D_
box-sizing:border-box;_x000D_
padding-left: 200px;_x000D_
/*width of the image*/_x000D_
background: url(http://lorempixel.com/200/200/city/2) left top no-repeat;_x000D_
}
_x000D_
<div class="application-title">_x000D_
<img src="http://lorempixel.com/200/200/city/1/">_x000D_
</div><br />_x000D_
Original Image: <br />_x000D_
_x000D_
<img src="http://lorempixel.com/200/200/city/1/">
_x000D_
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="..."/>
Here is another dirty hack :)
.application-title > img {
display: none;
}
.application-title::before {
content: url(path/example.jpg);
}
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:
Source: Stackoverflow.com