JS Problems geeksforgeeks Exercises and Solutions for Beginners

How to Set img src using CSS [All Method]️

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.

Related Articles

Leave a Reply

Your email address will not be published.

Back to top button