How can I fix breaks in my seamless craft theme background?

Store Design

Topic summary

A user encountered breaks in a seamless background image on their Shopify store after adding it to the base.css file. The pattern wasn’t displaying seamlessly as intended.

Solution provided:

  • Modify the base.css file by locating the body background image snippet
  • Add CSS properties to the body.gradient selector:
    • background-attachment: fixed !important
    • background-size: cover !important
    • background-repeat: no-repeat !important

Outcome:
The suggested CSS fix resolved the issue. The fixed attachment prevents scrolling breaks, cover ensures proper scaling, and no-repeat eliminates tiling gaps that were causing the seamless pattern to appear broken.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

Hello there!!! I’m needing some background help! I had placed a seamless design as my background. I coded it into the base.css. The issue I am having is that it has breaks within the website so it doesn’t appear seamless. Does anyone know how to fix this so there isn’t any breaks and indeed my image be seamless? Thank you!

URL: https://moderndayrags.com/

2

Hello @moderndayrags ,

I would like to give you some recommendations to support you.

Please go to Base.css file, scroll to the snippet where you set the background image for the Body and add replace with my code.

body.gradient 
{
    background: url(https://cdn.shopify.com/s/files/1/0558/9100/1507/files/Untitled_design.png?v=1667087969) no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

I hope you find the answer helpful, if you need further support, do not hesitate to reach out to us.

Kind & Best regards,
GemPages Support Team.

1 Like
3

@GemPages Thank you so much!

4

Hi @moderndayrags ,

I am so glad that my suggestion can help. If you need further support, do not hesitate to reach out to us :grin: .

Kind & Best regards,
GemPages Support Team

1 Like