Change background image across whole of Navigation Bar

Store Design
, , , , ,

Topic summary

Goal: apply a single background image across the entire header/navigation area of a Shopify store to improve responsive alignment (currently split images for header and nav don’t align on different devices).

Attempted approach: custom CSS added in theme.liquid targeting the header section with a background image URL did not take effect.

Key inputs:

  • Community members shared corrected CSS targeting/structure (exact code not visible in the excerpted post).
  • A highlighted screenshot (from browser inspector) indicates the precise area to style; this visual context is central to the issue.

Outcome: the CSS provided by one responder (Dan) worked. The original poster confirmed the fix and expressed thanks.

Technical notes:

  • The change likely involved adjusting CSS selectors and/or placement within theme.liquid to ensure the background applies to the correct container for both header and navigation.
  • No theme-specific or JavaScript changes are mentioned.

Status: resolved. No remaining open questions or further actions reported.

Summarized with AI on January 11. AI used: gpt-5.
1

Hello All,

I would like to find out how to add an image across he entire size of the navigation bar/header on this site.

Currently, there are background images on them, but they need to be split up (one for header, one for nav bar)

This in turn means that responsiveness to other devices do not align correctly and it would be impossible to create one fluid image to go there.

Would anyone know what code I would need to add an image in the background in the highlighted area as seen on this inspect tool?

Toptoys2uHS_0-1701335542038.png
Toptoys2uHS_0-1701335542038.png1276×372 115 KB

I have tried updating the code on Theme.Liquid with this, but unfortunately it did not work.

<style>
div#shopify-section-header .shopify-section .shopify-section__header {
background: url("https://cdn.shopify.com/s/files/1/1779/2423/files/Santa_Belt_Subscribe.webp?v=1698940905");
}
</style>

Would anyone be able to implement the code correctly to get this to work?

The website can be found here:

https://toptoys2u.co.uk/

I appreciate any help!

2

try this code
3

Please update code to this
1 Like
4

Hello @Dan-From-Ryviu

This seems to work, thank you for your help on this issue!

1 Like
5

You are very welcome

Best Regards,

Dan from Ryviu: Product Reviews & QA app