How to put background image in homepage body?

Technical Q&A
1

Hi experts,

Is there a way to give my homepage body a background image?
I inserted a custom HTML section and tried this but all it did was put a black blur on my entire page.

body {
 background-image: url("");
}

Copy

It seems to have overlapped the foreground elements. I hope someones already done this. TYIA

tiara99_0-1623374762200.png
tiara99_0-1623374762200.png400×207 29.9 KB

2

Hi @tiara99 ,

I am Pallavi from the Shopify Support team.

Great question and happy to help. An easy way to create a background image for a homepage body is to go to Online Store > Themes > Edit HTML/CSS and find the template the page is deriving from. Next you will want to create a new

which wraps the whole page giving it a class you can target in the .CSS or .SCSS of your theme. Next upload the image to your assets folder in so it can be accessed. In the the .CSS of .SCSS file got to the bottom of the file and add this code.

body {
background:url({{ 'your_custom_image.jpg' | asset_url }});
background-size:cover;
}
1 Like
3

Hi @tiara99 ,

Please follow the steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.template-index .main-content{

background-image: url(“”);

background-repeat: no-repeat;

background-size: cover;

}

Hope this helps!

1 Like
4

@LitExtension This is amazing. Thanks