Changing a Horizon section's background from fit/center to tile/repeat

Store Design

Topic summary

A user is attempting to modify a Horizon theme section’s background image behavior—specifically, to tile/repeat a smaller image from the top-left corner instead of using the theme’s default “cover” or “fit” options.

Attempted Solution:
The user knows the required CSS properties (background-size: auto, background-repeat: repeat, background-position: top left) but cannot identify the correct element to target. One responder provided instructions using the section’s unique Shopify ID (e.g., #shopify-section-template--XXXXXX__section_name) in the theme’s global CSS, but this approach did not work.

Key Issue:
The user prefers to apply the CSS directly within the section’s custom CSS field (not the theme’s global CSS) to avoid needing the randomly-generated section ID. Multiple responders have requested the store URL to inspect the code, but the user insists the solution should be possible without site access.

Status:
The discussion remains unresolved. No one has yet provided a method for applying tiled backgrounds using section-level custom CSS in Horizon theme.

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

Any given section in Horizon that allows a background image has the choice between cover or fit, with the latter fitting the image in the dead center. If the image isn’t big enough to cover the background, I would like to place it at the top left and then tile/repeat it.

I know the CSS to do this, but I can’t figure out the element to use. I’ve tried all I could find in Inspector. Help?

1 Like
2

@hostilearth did you use background repeat CSS property? can you please share your page link?

3

I tried every element I could find, and I used this with them:

{
  background-size: auto;
  background-position: top left;
  background-repeat: repeat;
}

I can’t share the page without the password; it’s still in a partner account.

4

@hostilearth you can share preview, even to the DM here or email on my profile

5

Adding any section from Horizon (I’m using Rich Text) will give you the code base I’m working with.

6

@hostilearth can you please share preview link?

7

Hey @hostilearth ,

You’re absolutely right - the Horizon theme gives you the “cover” and “fit” background options, but not the ability to tile or position smaller background images (like patterns). Luckily, you can override this with a little custom CSS.

Follow These Steps:

  1. Go to Online Store > Themes > Customize
  2. Open the section where your background image is applied
  3. In the Theme editor sidebar, click the “Theme settings” > “Custom CSS” (or go to Edit code > base.css/theme.css)
  4. Add this snippet at the bottom:
/* Replace .section-id with the actual section's unique ID */
#shopify-section-template--XXXXXXX__yoursectionid {
  background-size: auto !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}
  1. In your browser, right-click the section > Inspect.
  2. Look for a <section> tag with an ID like:
id="shopify-section-template--18627804463257__image_banner"

Copy that entire ID and replace it in the code above.

If you’d like me to locate the exact element for your section and give you the precise CSS selector, please share your store URL (and password if applicable) - I’ll be happy to check and provide the exact line to paste.

Best Regards,

Rajat | Shopify Expert

8

Thank you. I followed your instructions, ended up with

#shopify-section-template--25085427089711__section_jPQCcc {
  background-size: auto !important;
  background-repeat: repeat !important;
  background-position: top left !important;
}

and nothing changed. Shouldn’t I be able to use the CSS within the section, without using #shopify-section-template–25085427089711__section_jPQCcc (i.e., not use the global CSS for the theme)?

9

Hi @hostilearth

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

10

Hello @hostilearth ,

I hope you are well!

Can you please share the store URL so that we can provide you the CSS according to your theme. I will also check myself to find the element the of the Inspector.

11

Hey @hostilearth,

If you can share your store url and password the I can take a look into it.
Thanks

12

I appreciate the interest, but I would prefer to use the sections custom CSS rather than the theme’s site wide custom CSS, and in this way the randomly generated section name isn’t necessary.

Can it not be done this way?

13

It’s interesting how no one wants to help without a website, even when the solution doesn’t require a website.