Given that I have the following markup on my Jekyll site:
<header>
<hgroup>
<h1>Page title</h1>
<h2>Page subtitle</h2>
</hgroup>
</header>
I'm trying to apply a background image it using CSS, however, I need to use the {{ site.baseurl }} variable so the location of the image file is parsed correctly. Unfortunately, the following code does not work:
header {
background-image: url('{{ site.baseurl }}/img/bicycle.jpg');
}
Inline styles actually do work with {{ site.baseurl }} and the below code works.
<header style="background-image: url('{{ site.baseurl }}/img/bicycle.jpg');">
But I really don't want to use inline styles. What is the method to apply background images to Jekyll sites?