CSS file considered as being an image resource

Question

I am not sure what the problem is, but the css stylesheet appears under the images group when I inspect my web page with safari or chrome, and shows that the "Resource Type" is image, even when the MIME type is correct and shows "text/css".

SS of the problem:

Line of html that links the css file to the html.

<link rel="stylesheet" href="style.css" type="text/css">

In addition to the built-in inspector not displaying the type correctly, this poses an additional problem of not displaying the contents of the file, and displaying an unknown image icon instead.

I honestly don't have the slightest clue as to where to start looking, or what to google to find out what the problem is. Is there more to determining types of files than the extension and/or the MIME type??

EDIT:

CSS with url() was causing the problem.

background-image: url();

Apparently the usage of url without anything in the brackets causes this to happen. Can you enlighten me on why this might happen??

Answer 1

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.