In CSS, when / should the `url ()` function be used compared to a string?

Question

What's the difference between

.class { background-image: 'bg.png'; }

and

.class { background-image: url('bg.png'); }

?

Equivalently

@import 'file.css';

against.

@import url('file.css');

Answer 1

In my tests and studies it is background-image: 'bg.png';completely invalid. According to MDN, it background-imagemust be defined as a keyword or <image>, which, when accessing an image file, must use a function url.

For @importhowever, the function urlis optional and there is no difference.

---

Invalid:

.class {
    background-image: 'bg.png';
}

Really:

.class {
    background-image: url('bg.png');
}

---

Valid and accurate:

@import 'file.css';
@import url('file.css');

Answer 2

According to MDN <image>article :

These are valid image values:

url(test.jpg)                          The url() function, as long as test.jpg is an image
linear-gradient(to bottom, blue, red)  A <gradient>
element(#colonne3)                     A part of the page, used with the element() function, if colonne3 is an existing CSS id on the page.

:

cervin.jpg                             An image file must be defined using the url() function.
url(report.pdf)                        The file pointed by the url() function must be an image.
element(#fakeid)                       If fakeid is not an existing CSS id on the page

background-image <image> ( none), , background-image: url('bg.png'), background-image: 'bg.png' .

@import spec , :

'@import' URI . ; , url (...) .

@import ( "url()" ):

@import "mystyle.css";
@import url("mystyle.css");