How to Set img src using CSS [All Method]️
![How to Set img src using CSS [All Method]️](https://howisguide.com/wp-content/uploads/2022/02/How-to-Set-img-src-using-CSS-All-Method.png)
It’s also a question How to Set img src using CSS? What should you do if you come across a code error! Let’s get started on fixing it.
Question: What is the best solution for this problem? Answer: This blog code can help you solve errors How to Set img src using CSS. Question: What is causing this error and what can be done to fix it? Answer: Check out this blog for a solution to your problem.
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.
Now you learned, How you can use & How to Set img src using CSS.
Now you can solve your code error in less than a minute.