Adding a background image, keep the menu and cards as is, desktop and mobile versions

Store Design

Topic summary

A user is attempting to add different background images for desktop and mobile versions of their store while preserving existing design elements.

Current Issues:

  • Background image only appears in the gap between menu bar and homepage content
  • Alternatively, the image extends through everything, making the menu transparent and difficult to read
  • Top message bar sometimes becomes unintentionally transparent
  • Product information cards (white backgrounds) are being filled with the background image instead of remaining solid

Goal:
Apply large background images without affecting:

  • Menu bar readability
  • Top message bar
  • Product card styling

The user has attempted multiple solutions but lost track of their changes after breaking the code repeatedly. The discussion remains open with no solutions provided yet.

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

Hello,

I have gotten very close but I keep breaking the code and now i’ve basically lost track of what I even did…

What I’m trying to do is apply a very large image to create a background on my mobile site and desktop sites (different images so they looks as intended)

The issue I’m having is either the image only applies to the gap between the menu bar and the other home screen items. Or Through everything and the menu blends in and is transparent so very difficult to read. I do not want it to effect the message bar at the very top of the page either and sometimes that becomes unintendedly transparent.

If I have where my products have the white card below it to show the product information it fills with the background which isn’t intended. I’d appreciate any help! Thank you!