89
Hello. On my home page template, I have the following .css applied.
Thank you Matt Bayes . I'm not really familiar with Javascript, so I'm not sure I could pull off the above. I appreciate the idea of looking at the Header Web template, and I had some success by adding a picture to the header web template - and thankfully, this is also behaving in a responsive fashion, which I wasn't able to do with the CSS code alone. I will keep this though, and as I learn more about liquid and JS, hopefully I can use this as well.
Hey Unicorn Tech!
To my knowledge, there is no way to do the conditional CSS just using CSS alone. If you wanted to set a specific image based on the webpage accessed you would have to use Javascript/JQuery.
If you were to edit the Header web template, you should be able to add a function near the bottom of the file that will read the current path (using the location object), and based on the page URL you will have to override the styling for the .section-landing to set the background appropriately.
There are a few ways you could accomplish this but I think utilizing the Header web template is the easiest and adding the JS function to the file should be straight-forward.
If you were partial to using Liquid code you could do a hybrid approach and use Liquid to retrieve the page URL (instead of using JS to strip the URL), save that page URL to a hidden HTML element on the header, and then use JS to pull that value and assign the image.
For example:
Share
Report
All responses (
Answers (
{% assign page_url = page.url %}
{{page_url}}
function setHeaderImage() {
let url = $("#pageUrl").text();
let imageUrl = "";
switch (url) {
case "/page-1":
imageUrl = "page-1-image.jpg";
break;
case "/page-2":
imageUrl = "page-2-image.jpg";
break;
}
$(".section-landing").css("background", "url(" imageUrl ") no-repeat center !important");
};
The alternative (which may be cleaner) would be to utilize classes for your styling and handle it all in your stylesheet. You would still need to write JS code to add the class to the element, however, you could add "page-1-class", "page-2-class", etc. to the ".section-landing" element and then handle the image setting in those classes in your stylesheet.
Either way will work, it's really up to you!
Thanks!
Matt Bayes
#1
André Arnaud de Cal...
293,245
Super User 2025 Season 1
#2
Martin Dráb
231,925
Most Valuable Professional
#3
nmaenpaa
101,156
Moderator
