Add a Background Image to Featured Collection on Homepage

Topic summary

Goal: add a background image to the homepage Featured Collection in the Taste theme.

What worked: adding CSS in the section’s Custom CSS:

  • Selector used: .section-template–21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding.
  • Properties: background-image (use image URL from Shopify Admin > Content > Files), background-size: cover, background-position: center.
  • Outcome: original poster confirmed success after identifying the correct section/container via Inspect Element.

Alternative approach: edit theme stylesheet (base.css/style.css/theme.css):

  • Add CSS with selector .collection.section-template–21383141261628__cbd01b2f-2d65-4656-860b-8cdb4b4547c2-padding.
  • Note: edits may need re-adding after theme updates.

Another workaround: add a Custom Liquid section in the header and hide its div via CSS (display:none!important) to persist across updates; the exact code snippet was not provided and the method is unconventional.

Key details:

  • The section-template class/ID is store-specific; others must find their own via Inspect.
  • One sample misspelled background-position; use correct spelling.

Open questions:

  • How to target a specific collection when adding CSS in base.css.
  • A user reported the provided selector didn’t work, likely due to mismatched section ID.

Artifacts: code snippets central; screenshot not essential.

Summarized with AI on December 28. AI used: gpt-5.

Welcome. Find the section first and choose the one who will select all the section and try first to put the background color if it work then used it if not then find another div. :laughing: