How can I set an image as my website's main page background?

Store Design
, , ,
1

I would like this image the background of my website on the main page: i6XDo7w.jpg (3024×3024) (imgur.com)

Preview of website: https://gk6ell44phjyk7n2-79570010410.shopifypreview.com

2

Hi @julianojg

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this code in your index.liquid file before tag:

{% if template.name == “index” %}

{% style %}

.gradient {background-image: url(https://i.imgur.com/i6XDo7w.jpg) !important; background-position: center center; background-repeat: no-repeat; background-size: cover;}

{% endstyle %}

{% endif %}

Regards,

San

3

i cannot find the index.liquid?

4

Your reply helped me so thank you!
I used the

{% if template.name == "index" %}

To make sure that it was only on the front page

Here was the code:

{% if template.name == "index" %}

    {% style %}

    body.gradient {
            -webkit-backdrop-filter:  brightness(15%);
            background: url(https://i.imgur.com/i6XDo7w.jpg) !important;
            background-position: center center;
            background-repeat: no-repeat !important;
            background-size: cover !important;
            background-attachment: fixed !important;
        }
       
        .gradient {
            background: rgb(#000000)
        }
       .footer.gradient,
     header-wrapper  {
            background: rgb(#000000)
        }

    {% endstyle %}