HTML CSS to Remove Header Image ONLY From the Home Page

GoodKarmaCo · ‎02-24-2021

Hey everyone,

Searched through the community and couldn't find an answer so hoping someone can help me modify the HTML code for this issue.

I added the following code to my theme.scss.liquid:

.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}

Everything works fine. Except, I want this image to appear on every page of my site EXCEPT the home page (I have a Slideshow section on the home page acting as a header). Can anyone help me edit the HTML so that it displays the header on every page except the home page? Thank you!

Ninthony · ‎02-24-2021

Change "unless" to "if" and "endunless" to "endif". Sorry not at a pc right now or I'd just repost it corrected for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Ninthony · ‎02-24-2021

What kind of file did you add that into? If it's a css.liquid file you can check the template name with liquid:

{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}

Alternatively if you take that out of a css file, you can perform that action at the opening <body> tag in theme.liquid and wrap it in style tags:

<style>
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}
</style>

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

GoodKarmaCo · ‎02-24-2021

Thanks for the response Ninthony! I'm not sure exactly how to check the template name? I just added the previous html code into theme.scss.liquid. The header shows up on every page; but it overlaps with the homepage. You can see what the issue is on my site here:

Website: wewantgoodkarma@gmail.com

Password: Wewantgoodkarma

I tried the html you provided on both theme.scss.liquid (in assets) as well as theme.liquid (in layout). But that didn't seem to work. Alternatively, if I could somehow add the Slideshow image thats on the home page to every page, that could work as well. Thanks in advance 🙂

GoodKarmaCo · ‎02-24-2021

Hi Ninthony, you sent me the following code to add to my theme.liquid in my layout code section. I tried it again and realized I actually need the opposite lol.

This code is only displaying the header image on the home page, and removing it on all other pages (works very well for that). But could you help me with code that removes the header image from the home page, and displays it on all the other pages? Thank you in advance 🙂

<style>
{% unless template.name == 'index' %}
.site-header {
background-image: url("(image name).jpg");
background-size: 100%;
}
{% endunless  %}
</style>

Ninthony · ‎02-24-2021

Change "unless" to "if" and "endunless" to "endif". Sorry not at a pc right now or I'd just repost it corrected for you.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

GoodKarmaCo · ‎02-24-2021

Thank you so so so much!!! That worked perfectly! I should've realized it was the opposite. Thank you again for all your help; wishing you a blessed year!

Ninthony · ‎02-24-2021

No problem, glad it helped.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

HTML CSS to Remove Header Image ONLY From the Home Page

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links