Customise Header

[Vaultofthecards]

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)

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

Any help would be greatly appreciated 🙂 

[Dan-From-Ryviu]

Hi @Vaultofthecards 

Could you share your store link so I can check? 

[Vaultofthecards]

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

[KetanKumar]

@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.

[Dan-From-Ryviu]

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%;
}
}

[Vaultofthecards]

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?

[DaisyVo]

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. 

[Vaultofthecards]

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)

[DaisyVo]

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. 

[Vaultofthecards]

Hi Daisy, 

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