How to stop scrolling on a landing page with a background image?

Store Design
,
1

Hello there,

So right now I have a “click to enter” page.

The background is an image, I have it with this code:

body {
    background: url(https://cdn.shopify.com/s/files/1/0550/4303/1221/files/Background_re-crop.png?v=1676311974) !important;
 }

So when the background is an image you are able to scroll on the homepage to stretch the image and white appears where the image ends. This is especially easy to do on mobile. Is there a way to prevent this scrolling so the image is fixed and no white would ever be visible?

Also when the image is scaled down to mobile (or a smaller window) it seems to fix the top left corner of the image. Is it possible to have this image slightly more fluid and scalable when changing screen sizes? (If that make sense…)

Preview website link: https://cztnwrh9s3509j7z-55043031221.shopifypreview.com

Thanks!

2

Hi @Elliott94

Please follow these steps:

  1. Open Edit code at Online store > Themes > Edit code:
![view (39).png|1802x841](upload://llGf5jg9kcFHBXBJxd0ZZE8thRC.png)
  1. Find the index file and add the following CSS:
.body{
   overflow: hidden;
}

The image will be fixed and no more whitespace.

I hope that this can help you.

3

Hi @BSS-Commerce , thanks for getting back to me.

Do you know where exactly I should be putting this code? I have tried within base.css, section-main-page.css and theme.liquid and none of these changed anything, The background still wasn’t fixed.

The only index file I have is .json so the code would not save in there.

Any further help would be much appreciated!

Thanks!

4

Hi @Elliott94

We can’t know the exact files in your store because we don’t have access. So you can try adding this code at the end of the base.css file:

.gradient{
   overflow: hidden;
}

If it doesn’t work, please share your store access with us. We will help you edit it.

5

@BSS-Commerce So this code works for the homepage but it then prevents any scrolling on the rest of the site, so you can’t scroll through products or collections. Is there code that will action this for the homepage only?

6

Hi @Elliott94

Since we don’t have access to your store admin, it’s hard for us to know exactly how you edited or used the app to create the homepage.

The code we guide you will affect all pages because they share the same body class. Besides, your store link has expired and we can’t access it anymore. If possible, please share your store access with us so we can edit as efficiently as possible.