Solved

Add a GIF background to Homepage only

AuthorAngel
Shopify Partner
21 0 2

Hi

 

I'd like to add a GIF as the background to my homepage only. All the information I have seen will update the background everywhere, and I only want it to change on the homepage if possible? Could anyone offer advice on how I can do this please? It needs to be twinkling or falling golden stars GIF which I have added to the content files. But I don't know the code or where for just the homepage change. 

 

 Website is - https://lesley-jones-writes.myshopify.com/

Password - help

 

Thank you for any advice anyone can offer. 

Accepted Solution (1)
theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @AuthorAngel 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

{% if template contains 'index' %}
<style>
body {
    background-image: url("https://media1.giphy.com/media/2zV56u0WuJZsc/giphy.gif?cid=ecf05e47x0eho3axr48uxi87dv4oqlfjt7lywdcq9jlhba91&ep=v1_gifs_search&rid=giphy.gif&ct=g")!important;
}

div {
    background-color: transparent;
}

sticky-header.gradient,
div.gradient,
footer.gradient{
    background: transparent!important;
}

#shopify-section-template--20389147902243__5ceccf03-feff-4b73-b23f-f02c21243453 {
    background: transparent!important;
}

#shopify-section-template--20389147902243__5ceccf03-feff-4b73-b23f-f02c21243453 div {
    background-color: transparent!important;
}

.field__input {
    background: rgba(0,0,0,0.5);
}

</style>
   {% endif %}

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store

View solution in original post

Replies 4 (4)

theycallmemakka
Shopify Partner
1157 249 267

The password is not working

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
AuthorAngel
Shopify Partner
21 0 2

apologies it should work now

theycallmemakka
Shopify Partner
1157 249 267

This is an accepted solution.

Hi @AuthorAngel 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

{% if template contains 'index' %}
<style>
body {
    background-image: url("https://media1.giphy.com/media/2zV56u0WuJZsc/giphy.gif?cid=ecf05e47x0eho3axr48uxi87dv4oqlfjt7lywdcq9jlhba91&ep=v1_gifs_search&rid=giphy.gif&ct=g")!important;
}

div {
    background-color: transparent;
}

sticky-header.gradient,
div.gradient,
footer.gradient{
    background: transparent!important;
}

#shopify-section-template--20389147902243__5ceccf03-feff-4b73-b23f-f02c21243453 {
    background: transparent!important;
}

#shopify-section-template--20389147902243__5ceccf03-feff-4b73-b23f-f02c21243453 div {
    background-color: transparent!important;
}

.field__input {
    background: rgba(0,0,0,0.5);
}

</style>
   {% endif %}

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

❤️❤️

Buy me a coffee


For quick response - Message Me


For easy store customization, try PageFly
Add Winter vibe to your store
AuthorAngel
Shopify Partner
21 0 2

That is absolutely perfect. Thank you very very much.