Re: Background Image Duplicates

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

GarmentGarage
Excursionist
15 0 1

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?

Why.png

whyyy2.png

  

Replies 11 (11)

RomanG
Shopify Partner
33 9 12

Hey @GarmentGarage  

Can you share your store link?

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
GarmentGarage
Excursionist
15 0 1

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

PageFly-Kate
Shopify Partner
1193 343 356

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

RomanG
Shopify Partner
33 9 12

@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. 

RomanG_0-1677015317686.png

 

 

 

 

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;
}

 

 

 

 

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
GarmentGarage
Excursionist
15 0 1

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
Excursionist
15 0 1

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

Thank you so much

RomanG
Shopify Partner
33 9 12

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

RomanG_0-1677016398844.png

 

 

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
GarmentGarage
Excursionist
15 0 1

GarmentGarage_0-1677016570943.png

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

 

RomanG
Shopify Partner
33 9 12

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

RomanG_0-1677016796388.png

 

If you find my reply helpful, please hit Like and Mark as Solution

Github
Stack Overflow
GarmentGarage
Excursionist
15 0 1

Could i give you access to my store?

GemPages
Shopify Partner
5621 1261 1230

Hello @GarmentGarage ,

 

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

GemPages_0-1677028819836.png

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

GemPages_1-1677028838195.png

    <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

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center