I would like to use a vibrant background image on the splash/home page, but a low contrast version of the image for the remaining pages. I am using a slightly customized focus theme. I'm assuming I can override the background for specific slides, but can't find an obvious variable or setting to change. Suggestions?
The key to doing this is editing the part of your Layout.html file that defines the URL of the background image. This URL that is used to set the background image by default is a liquid variable that pulls in the URL of the image that you've uploaded via Site Settings > Background image. The liquid variable shows up in yellow towards the bottom of the Layout.html file.
To configure the site so that a different image is displayed based upon the page slug, you can wrap that yellow liquid variable in a liquid conditional statement, so that the standard variable is used for most pages but that a different image URL is used if the page slug is something specific, like 'home' or 'splash'. The liquid syntax that you will need to use is as follows:
{% if page.slug == 'yourpageslug' %}http://yourimageurl.com/here.jpg{% else %}{{ site.background_image_url }}{% endif %}
Here's a screenshot of this in my nation:
Showing 6 reactions
Sign in with
In layout.html, is it inserted here:
Hines Digital
Certified Architect
Certified Expert
Hope that works for you – if you need more help, just shoot us an email. Thanks!