Background Image Repeating in Header/Footer Spotlight Theme

Store Design
, , ,
1

Hey there,

I’m trying to put a background image on my site that covers the whole site. With my current code snippet, it repeats in the header and footer separately, on desktop and mobile. I’ll attach images of how it looks.

Here’s my current snippet:

ezfy-background-image

html, body, [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']), [id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{ background: url("") !important; background-size: cover !important; }

shopify_desktop.png
shopify_desktop.png3324×1950 721 KB

shopify_mobile.png
shopify_mobile.png1114×1822 229 KB

2

Hi @Tokyogriff ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the background image repeat at header /footer, let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css

html, body,

[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']),

[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{

    background: url("") !important;
    background-repeat: no-repeat;
    background-size: cover !important;

}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Hi @Tokyogriff
Its Artzen Technologies! We will be happy to help you today.

To make the background image not repeatable use the following CSS with the already added CSS.

Online Store ->Theme ->Edit code
Assets ->Base.css

html, body,
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']),
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{
    background: url("") !important;
    background-size: cover !important;
    background-repeat: no-repeat;
}

This background-repeat: no-repeat CSS will make the background image non-repeatable and hence I hope your problem will be solved.

Let me know if need further assistance
Regards,
Artzen Technologies

4

Hi, @PageFly-Theodor .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

html, body,

[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer']),
[id*='shopify-section']:not([id*='announcement']):not([id*='header']):not([id*='footer'])> [class*='background']{

    background: url("") !important;
    background-repeat: no-repeat;
    background-size: cover !important;

}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

5

Hi @Tokyogriff

Follow these Steps:

Go to Online Store Edit Code Find theme.liquid file or base.css

Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solutions.

6

Putting it in the base.css is much easier but unfortunately I’m getting the same issue still. Let me know if there’s anything else I can try. Thank you!

7

Putting it in the base.css is much easier but unfortunately I’m getting the same issue still. Let me know if there’s anything else I can try. Thank you!

8

Putting it in the base.css is much easier but unfortunately I’m getting the same issue still. Let me know if there’s anything else I can try. Thank you!

9

Hi @Tokyogriff,
This is Theodore from PageFly - Shopify Page Builder App.

Can you give me the URL to help you better?
I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly