Custome CSS for background image tiling for Horizon section

Topic summary

A user is trying to tile a background image in a Horizon section but the built-in options (“cover” or “fit”) don’t provide the desired result. The “fit” option centers and expands the image to section height rather than tiling from the top-left corner.

Goal: Tile a background image from the top-left corner to fill the entire section space.

Requested help:

  • Identify which CSS class(es) to target in the section’s custom CSS area
  • The user has prepared CSS code ready to use:
    • background-image: url('<url path>')
    • background-size: auto
    • background-position: top left
    • background-repeat: repeat

Note: The user requests helpers test with a Rich Text section in their own store, as they cannot share a store URL. They acknowledge auto-generated class names may differ but need the pattern/approach.

Status: Question remains unanswered; no solution provided yet.

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

I’ve spent a lot of time getting no where with this; AI couldn’t solve the problem either after feeding it the entire page source code. But I know the answer isn’t that complicated.

Horizon sections allow adding a background image, but its either “cover” or “fit”* and I’m looking to tile an image from the top left corner and fill the entire space of the section.

* Fit actually manipulates the image too; it’s placed in the center but expands to fit the height of the section.

Here’s what I’m looking for:

  1. Which class(es) to use in the section’s custom CSS area.**
{
background-image: url('<url path>');
background-size: auto;
background-position: top left;
background-repeat: repeat;
}

This should be the CSS to use once I find the class(es).

** Please, if you can help, add the Rich Text section to a store you have, and work off of it. I can’t provide a store URL. If there’s a unique auto generated class name, use whatever is on your end, that will be enough for me.

Thank you.

Leave it like it is in your snippet, without selector:

■■■■. It was that simple? I was really over complicating it. Thank you!

1 Like