Make header image static

Store Design
, , ,

Topic summary

Main issue: The wood background in the header visually shifts on scroll (especially on mobile). The goal is to make that background appear static.

Early suggestions (later deemed irrelevant):

  • Change the header from sticky to static via CSS (.section-header { position: static; }) or set the Header “Sticky on scroll up” option to “None.”
  • Guidance was provided on where to add Custom CSS in Admin.

Clarification and correct direction:

  • The problem is the header background movement, not header stickiness. A screen recording was shared to illustrate.
  • Proposed fix: set .head-wrapper { background-attachment: scroll; } (changing from fixed). A demo video showed the background no longer shifting.

Current status:

  • The CSS change appears to work on desktop per the reporter but not on mobile. The helper cannot reproduce the mobile issue and requested more details.

Notes:

  • background-attachment controls whether a background image scrolls with content (“scroll”) or stays fixed relative to the viewport (“fixed”).
  • Images and videos are central to understanding the behavior (multiple screenshots and two YouTube links).

Outcome: No resolution yet; mobile-specific behavior remains unresolved and requires further details/testing.

Summarized with AI on December 16. AI used: gpt-5.
1

Looking to make the wood header image static. Currently the image moves when you scroll up and down. This is more noticeable on mobile.

https://crosbyaudio.com

Thanks.

2

Hi @crosbyaudio !

It looks like the header section is set to sticky, which is causing it to move as you scroll.

.section-header {
    position: sticky;
    margin-bottom: 0px;
  }

Changing the position to static should solve the issue and keep it in place.

.section-header {
    position: static;
    margin-bottom: 0px;
  }

Let me know if you need any further details or run into any issues!

Hope this helps!

3

Thanks, but where does the code go?

4

Ah, sorry about that!

In the Admin area, go to the Header section of your site, and scroll to the bottom to add the new code in the Custom CSS.

2024-10-10T10_21_35,596373266+07_00.png
2024-10-10T10_21_35,596373266+07_00.png1575×613 151 KB

2024-10-10T10_11_36,181786852+07_00.png
2024-10-10T10_11_36,181786852+07_00.png335×303 15.9 KB

Alternatively, there’s another method that doesn’t require Custom CSS! Currently, your header is set to ‘Sticky on scroll up.’ You can find this option on the same Header page in Admin.

2024-10-10T10_12_25,986137709+07_00.png
2024-10-10T10_12_25,986137709+07_00.png330×163 5.03 KB

If you change this setting to ‘None,’ it will revert to the default positioning, which is static.

2024-10-10T10_14_38,807076020+07_00.png

I’ve tested both methods, and either should solve your problem. Hope this helps!

5

Thanks, but I think you misunderstood my issue. I want to stop the wood background from moving when you scroll up and down. Please see the screen recording below.

https://youtu.be/jtwKd1lIU_w

6

Hi @crosbyaudio , if you set ‘sticky header’ (in Admin, same area as before) to ‘always’, the header will not move, despite scrolling up and down.

2024-10-11T11_20_15,627480639+07_00.png

Let me know if this solves your issue!

7

Sorry, still not the issue I’m having. It’s clear what the problem is in the video, but thanks for trying.

8

That’s my bad, I completely misunderstood.

I tested this CSS on .head-wrapper, changing background-attachment from ‘fixed’ to ‘scroll’.

.head-wrapper {
  background-attachment: scroll;
}

This stopped the image from moving.

https://youtu.be/2BFVnIGAhuM

This can be added to Admin => Header => Custom CSS.

9

That seems to work for desktop, but not mobile.

10

That’s unusual - it’s working on mobile when I test it. Could you give me more details?

11

The wood image still moves when you scroll up and down. The image needs to be static.