In CSS, when does/should one use the `url()` function versus a string?

Question

What's the difference between

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

and

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

?

Equivalently,

@import 'file.css';

vs.

@import url('file.css');

Answer 1

In my testing and research, background-image: 'bg.png'; is completely invalid. According to MDN, background-image must be defined as a keyword or an <image> which when referencing an image file must use the url function.

For @import however, the url function is optional and there is no difference.

---

Invalid:

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

Valid:

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

---

Valid and Identical:

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