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.
1. Using content: url
A quick, not very cross-compatible solution is to drop the src attribute and use content:url() in CSS.
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.
2. Using background-image and padding
Instead of dropping the src tag, we can use it to target that img element in our styles (we can also target the img using a class or id ).
Let’s say our newimage.png has width x height dimensions of 200px x 100px .
We can set the background-image to be the new image and push the inline image out of the way using padding.
img[src*="/path/to/image.png"] < background: url("/path/to/newimage.png") no-repeat; width: 200px; /* Width of new image */ height: 0px !important; height /**/: 100px; /* Height of new image */ padding: 100px 0 0 0; /* Height of new image */ > Here, we’ll 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.
It may also be helpful to include box-sizing: border-box; in order to force padding and borders into the total width.
HTML ![]()
Tag
The tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.
The tag has two required attributes:
- src — Specifies the path to the image
- alt — Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads.
Tip: To link an image to another document, simply nest the tag inside an tag (see example below).
Browser Support
Attributes
| Attribute | Value | Description |
|---|---|---|
| alt | text | Specifies an alternate text for an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| ismap | ismap | Specifies an image as a server-side image map |
| loading | eager lazy | Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Specifies which referrer information to use when fetching an image |
| sizes | sizes | Specifies image sizes for different page layouts |
| src | URL | Specifies the path to the image |
| srcset | URL-list | Specifies a list of image files to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image map |
| width | pixels | Specifies the width of an image |
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:
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:
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 :
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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Give feedback on this page , tweet at us, or join our Discord !