How to Set img src using CSS
I needed a way to set the src
attribute of my img
tags using CSS.
I didn’t want to define the path in HTML.
<img src="/path/to/image.png" />
Quick Solution
A quick, not very cross-compatible solution is to drop the src
attribute and use content:url()
in CSS.
<img />
img {
content: url("/path/to/image.png");
}
This is known to have issues in FireFox and IE, but it is much cleaner than this next solution.
More Elaborate Solution
Instead of dropping the src
tag, we can use it to target that img
element in our styles.
Let’s say our newimage.png
has width x height
dimensions of 200px x 100px
.
img[src*="/path/to/image.png"] {
background-image: url("/path/to/newimage.png");
width: 200px;
height: 0px !important;
height /**/: 100px;
padding: 100px 0 0 0;
}
We need to manually specify width
and height
.
Additionally, we accomodate for IE versions that mishandle the box model (height /**/
). Some code formatters will remove the space between height
and /**/
, which is needed, so ensure that the space is there after reformatting.