How to have a repeating pattern without breaks between sections?

Store Design
,

Topic summary

A user is experiencing visual breaks between sections when implementing a seamless gradient pattern background on their Shopify store homepage. The gaps disrupt the intended continuous design flow.

Solution Provided:

  • Navigate to Online Store → Theme → Edit code
  • Open the theme.liquid file
  • Insert custom CSS before the </head> tag that applies negative top margins to specific section classes
  • The CSS targets the multicolumn section and card info elements to eliminate spacing

Technical Details:
The fix uses margin-top: -5rem and margin-top: -3rem with !important flags to override existing theme spacing and create the seamless appearance between sections.

The issue appears resolved with the provided code snippet, though no confirmation from the original poster has been documented yet.

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

Hi Everyone,

We are trying to employ a seamless pattern on the home page however when trying to add a background with a gradient pattern there are breaks in between each section.

How do we make it seamless and continuous?

Example.png
Example.png1366×3884 868 KB

2

@MZ21

Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

URL: https://www.drawingsforjesus.com/
PW: leefea1

4

@MZ21

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
.page-width.section-template--23655326712099__multicolumn_WWMrmr-padding.isolate.scroll-trigger.animate--slide-in {
    margin-top: -5rem !important;
}
.multicolumn-card__info {
    margin-top: -3rem !important;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!