How can I fix multiple background image duplicates in my store?

[GarmentGarage]

I want to use a single gif or image files as the background to my store and my current code which is in a screenshot below is causing there to be multiple of the same images rather than just one. Is there a way to fix this?

  

[RomanG]

Hey @GarmentGarage  

Can you share your store link?

[GarmentGarage]

Its a test store so there's a whole lot wrong with it but the link is https://garmentgarage.myshopify.com/

[PageFly-Kate]

Hi @GarmentGarage ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

body {
   background-size: cover !important;
}

Hope my answer will help you.

Kate from PageFly Team

[RomanG]

@GarmentGarage  You set the background image as background property, not background-image on body element. I think you tried to use background property due by gradient class. so next background-repeat: no-repeat doesn't work! If you update your body's background like below code, it will work. 

body {
    background: url(https://cdn.shopify.com/s/files/1/0638/9497/8819/t/3/assets/ezgif.com-video-to-gif.gif?v=1677014630) center / cover no-repeat !important;
}

[GarmentGarage]

It works great! Thank you so much, however now theres some white bars appearing throughout the screen, any clue on how to combat those?

[GarmentGarage]

and is there any way I can stretch the image to the footer?

Thank you so much

[RomanG]

Because for the white borders, there are some border properties on some elements.
For example, in announcement-bar
To fix this issue,  remove this property border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08) on base.css

[GarmentGarage]

this is the issue im talking about do you see the white gap between the footer and the header?

[RomanG]

Lol, I'm on storefront password page.  I can't see that page on my end. Looks like it's development store and need to access with password input. also I couldn't see the password input field. no ways to check other pages

[GarmentGarage]

Could i give you access to my store?

[GemPages]

Hello @GarmentGarage ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
      @media (min-width: 750px ) {         
          .section-footer-padding {
              padding-top: 48px;
              padding-bottom: 36px;
              background: none !important;
          }
      }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team