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

css, url

Solution

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');

Problem

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'); ```

Original source