How to Set img src using CSS

Sometimes, you want to change the src attribute of an img without using HTML.

For example, going from this:

HTML
<img />

To this:

HTML
<img src="/path/here/to/image.png" />

A solution

You can simulate having a src attribute by using the content attribute in CSS, and passing in the image path url().

For example, if you want to simulate changing the src attribute of an img to /path/here/to/image.png, you can do this:

CSS
img {
    content: url("/path/here/to/image.png");
}

This can work in some cases, but it's not recommended, especially because there is a better solution.

A better solution

A better way to add a src attribute to an img is to use CSS targeting to add a background-image. The caveat here is that you need to know and provide the image's dimensions.

Here's how to target the img and add a background-image, with an image of dimensions 20rem by 10rem:

CSS
img[src*="/path/here/to/image.png"] {
    background-image: url("/path/here/to/image.png");
    width: 20rem;
    height: 10rem;
    padding: 10rem 0 0 0;
}

Once you do that, you should see the image in the browser, all without changing the src attribute.

Conclusion

If you don't want to change the src attribute of an img to a different image using HTML, you have two solutions to get the image to display in the browser using CSS.

Hopefully, this post has given you a solution that works for your needs. Happy coding!

• Support Us
• Discord
• Share
• Post
• Share