JSF – Referencing resources in stylesheets

I recently ran into some trouble when trying to show a background image in a JSF page which was included via a stylesheet. When using

<h:outputStylesheet library="css" value="styles/styles.css" name="styles.css" />

to include the stylesheet into the JSF page, referencing resources (like images) in the CSS file need a special URL form. The typical form

html {
  background: url("/resources/images/bg.jpg")
}

(or any other path like that) will not work. The correct form is

html {
  background: url(#{resource['images/bg.jpg']});
}