Customise Header

Shopify Discussion

Topic summary

Main issue: Custom CSS was added to set a background image for the header and footer, aiming to visually blend the header with the homepage slideshow. On different screen sizes (and when zooming), the header image and slideshow no longer align. Screenshots and a CSS snippet are central to the thread.

Key actions/updates:

  • Store URL and password were shared for review.
  • A suggested CSS update added max-width: 100% to header/footer and kept the background image settings. This improved the initial display issue.
  • The requester still wanted a seamless, “still” header image that matches the slideshow background across zoom/screen sizes.

Technical constraint explained:

  • The header uses a fixed height, while the slideshow (slider) dynamically scales in width and size as images change or viewport changes. Due to these differing dimensions/behaviors, perfect alignment between header and slideshow across devices and zoom levels isn’t feasible.

Outcome/status:

  • Partial resolution: initial styling fixed; alignment goal deemed impractical under current constraints.
  • The requester accepted the explanation and plans to explore a different background approach. Discussion effectively resolved with known limitation.
Summarized with AI on December 12. AI used: gpt-5.
1

Hi All!

I need some help with the header on the website, we have added the below code to allow us to customise it so there is a flow with the website:
@media screen and (min-width: 490px) {header.header {background:url(“https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png”) no-repeat; background-size: 100%;}footer.footer {background: url(“https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png”) no-repeat; background-size: 100%;}}

But what we are now encountering an issue which shows below when the website to accessed by different screen size’s.

This is what is showing when you open the website on a normal desktop (screenshot below)

Screen Shot 2024-12-09 at 12.19.12 pm.png
Screen Shot 2024-12-09 at 12.19.12 pm.png2482×542 197 KB

But we would love to have the website viewing as (screenshot below)

Screen Shot 2024-12-09 at 12.20.33 pm.png
Screen Shot 2024-12-09 at 12.20.33 pm.png2498×1076 445 KB

Any help would be greatly appreciated :slightly_smiling_face:

1 Like
2

Hi @Vaultofthecards

Could you share your store link so I can check?

3

@Vaultofthecards
Sorry you are facing this issue,
It would be my pleasure to help you.
Please share your site URL,
I will check out the issue and provide you with a solution here.

4

Hi @Vaultofthecards

Please try to update your code to this and check again

@media (min-width: 490px) {
header, footer { 
 max-width: 100% !important; 
}
header.header { 
 background:url("https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png") no-repeat; background-size: 100%;
}
footer.footer {
 background: url("https://cdn.shopify.com/s/files/1/0617/4549/6150/files/Background.png") no-repeat; background-size: 100%;
}
}
5

Hi @Vaultofthecards

I hope you are well.

Would you mind sharing store link and entry password so we can check and provide you with a suitable customization code for that request?

Looking forward to hearing from you soon. Thank you!

Best,

Daisy - Avada Support Team.

6

Our URL is https://vaultofthecards.com.au/
Password is: yeutsu

We want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match

7

Thank you so much that has worked !!!

But we want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match (we want the header image to be still)

Can you provide anything else that would assist?

8

Our URL is https://vaultofthecards.com.au/
Password is: yeutsu

We want to website to flow so the header and the slideshow match when the slideshow doesn’t go between slides
But now when zoomed in or out it doesn’t match(we want the header image to be still)

9

Hi @Vaultofthecards

Thank you for sharing it.

Your header has a fixed height, while the slider dynamically adjusts its width as you scroll through images. This mismatch makes it impossible to perfectly align the header and the slider images.

Hope you can kindly understand. Thank you!

Best,

Daisy - Avada Support Team.

10

Hi Daisy,

Thank you so much for explaining :grin:
Ill see what else we might use for our background to make it flow better