Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.
Topic summary
Main issue: The homepage background image was applied to all sections via a broad CSS selector (.gradient), causing text-containing blocks to also show the image. The requester wanted text sections (multi-row, image-with-text) to have their intended colors instead of the background image.
Key context: The store link was shared. Initial CSS used .gradient { background-image: url(…); background-size: cover; }, which affected many theme areas.
Solution provided: Replace the CSS to scope the background image to the body only and prevent section overlays:
- Apply image to body.gradient.animate–hover-default with background-size: cover.
- Force specific sections to not override with gradients by setting background: transparent !important on header, utility bar, color-inverse/accent sections, multirow, and image-with-text selectors.
Outcome: The visual result matched the request, confirmed by the requester with thanks. No further issues reported.
Notes:
- The fix relies on Shopify theme classes; exact selectors were tailored (e.g., multirow, image-with-text section IDs).
- Screenshots were provided to illustrate the before/after state.
Status: Resolved; no open questions.
1 Like