How can I set a single scrolling background image in the spotlight theme?

Store Design
1

I’m currently using the spotlight theme for my Shopify store.

The spotlight theme is divided into the Header, Body, Footer.

When I add a background image using coding I get one picture for body and another picture for header and footer.

I’m just looking to have one big picture in the background with it moving.

I don’t need a Header, Body or a Footer.

I just need one big clean and clear picture in the background and 8 product pictures at a time.

The product pictures must be able to scroll up and down so that the customers can view my other products.

Would anybody be able to help me out with this puzzle?

Or perhaps point me in the right direction.

Thank you

2

Hi @SaintLaurent

This is David at SalesHunterThemes.
In this case you can use this css code

body {
background-image: url('image-url');
background-size: cover;
backbround-position: center center;
}

with that code you it will add image background cover the page, and you needn’t add the background for header and footer.
If it still not work as you want, you can share the store url, then we will help you

3

Here’s my URL:

https://enchantingjewels.ca/?_ab=0&_fd=0&_sc=1

Unfortunately your css code did not help.

Where do I paste this code?

I’ve also attached a picture of the problem.

9993D367-1ACD-4EF3-A4B2-7DE53CDCB202.png
9993D367-1ACD-4EF3-A4B2-7DE53CDCB202.png2732×2048 759 KB

4

It’s still not working!
Here’s my Whatsup number:
604-862-7915
Please send me a message when you eat a chance.
I was hoping you could help me out.
I just need one simple background image that doesn’t move.
That’s it.
Plain and simple.
And perhaps I can pay you a little for your work.
Cheers

Andrei

5

Hi @SaintLaurent

Firstly please remove all the custom code that you added to make the background.

then Try to replace with this code:

html {
height: initial
}
body{
    background: transparent!important;
    background-image: url(https://cdn.shopify.com/s/files/1/0822/2723/3088/files/74FA200F-8E01-4B35-AA3E-7E025C405BB5.jpg?v=1694311554) !important;
    background-size: cover !important;
    background-attachment: fixed!important;
}

.gradient {
background-color: transparent!important;
}