Set a default background-image in your CSS file
This was the CSS I used before I had a dynamic hero image, there’s nothing too special here - by doing this we can default to the sitewide image if a specific one isn’t provided within the front matter.
Update your CSS inline based on the YAML front matter
While it would be preferable to localise this change entirely to the CSS file there are reasons (for better or worse) why jekyll doesn’t process liquid tags within the assets folder. Thus, into the HTML we must go. As shown below, we optionally include an inline style tag which sets our background-image.
This wouldn’t work in a modern single page application (SPA) but it works here because Jekyll processes all of the assets for each page that it generates.
Set a custom image within your post’s front matter
Now, we can easily set the
hero variable within our front matter to dynamically set the header image. The background image will safely revert to our site default for pages where we don’t set the hero variable in the front matter. There are two examples below showing the hero variable in action: