Parallax effect on header image

You can try background-attachment: fixed CSS rule.

Hello,

Thank you for your reply. It worked perfectly!

In case anyone need this, here’s the exact code I used :

header {
background-attachment: fixed ! important;
}

Note that it’ll zoom the image and it’s normal. The best solution is to add a bigger image and don’t crop it.

One more thing:

On mobile, the image stayed zoomed and the parallax effect disappeared so I added the following:

@media only screen and (max-width: 800px) {

header {
background-attachment: scroll !important;
}

It’ll show the entire header image (no zoom) and will scroll with the content.

PS: don’t forget to use a child theme

Note that on mobile phones scroll effect won’t work:) I’d also switch header element to .site-header class:

.site-header {
background-attachment: fixed ! important;
}

Ok thanks you for your reply. I’ll change this. ??