Unused content in the stylesheet

Question

I am currently referencing my CSS stylesheet in the following way:

<link rel="stylesheet" type="text/css" href='@routes.Assets.versioned("stylesheets/main.css")' media="screen" />

The location of the stylesheet is found at /public/stylesheets/main.css.

This is the content of the stylesheet:

body {
   background-image: @routes.Assets.versioned("images/deer.jpg");
}

Although there are no errors, the background image is not displaying. What could be causing this issue?

Answer 1

Answer №1

Resources available to the public (assets) are not handled by the template engine, hence

body {
   background-image: @routes.Assets.versioned("images/deer.jpg");
}

they are never processed.

Here is a related query:

Is it possible to reference images from CSS without using relative paths?

Possible Solutions

Utilize the static path
```
body {
   background: url("/assets/images/deer.jpg");
}
```
The /assets part may vary based on your routes configuration, with /assets being the default.
Embed CSS within the template file, which will be returned by your controller (instead of placing it in the public folder)

Answer 2

Resources available to the public (assets) are not handled by the template engine, hence

body {
   background-image: @routes.Assets.versioned("images/deer.jpg");
}

they are never processed.

Here is a related query:

Is it possible to reference images from CSS without using relative paths?

Possible Solutions

Utilize the static path
```
body {
   background: url("/assets/images/deer.jpg");
}
```
The /assets part may vary based on your routes configuration, with /assets being the default.
Embed CSS within the template file, which will be returned by your controller (instead of placing it in the public folder)