Google Chrome Developer Tools - CSS File Showing as an Image Resource

Google Chrome Developer tools - CSS file showing as an image resource

What happens if you remove the empty background-image?

CSS file is being loaded as Image

You may be having an issue similar to the post below. Their issue came from having some non-standard css, in their case background:url()

Google Chrome Developer tools - CSS file showing as an image resource

Test Local Background Image on Live Site with Chrome Dev Tools?

You can replace the url of the background image in the Elements panel with the url of the image you wish to try. Check this link to see how that is done.

This change will show effect immediately in your browser window. As Johan Linder mentioned, you will have to host the image somewhere in case you have the image on your computer.

nate wilton's answer correctly points out how to do this using a Chrome extension.

CSS file considered as being an image resource

If you leave an url() call as blank in the style of an element, it will send a request using the relative path, to get an image corresponding to the base URL itself.

To simplify, in that case, you asked style.css to loads itself as an image, that's why it resulted as your style.css file to be considered as an image. Tell me if I'm clear enough.

Just be sure to never leave your url() calls as blank and remember that the path is relative to the stylesheet path.

---

Related Topics