Thanks. I removed the “fixed” part cause it cause weird behaviour.
There’s another weird behaviour I’m trying to avoid. This is the link from the website.
http://elcalaixdelarosseta.com.mialias.net/
Now you can see the header, which has a header image, and a background image (which is just a continuation of the image on sides).
When you’re seeing the website in full width, you can’t appreciate the difference. However, when you start minimizing the window, the responsive layot changes the height of the header, and you can start seeing the mistake. First the background doesn’t scale, so you see it doesn’t fit with image (which gets adjusted), and if you keep minimizing till you reach mobile view, you can even see that the background over the image moves while you resize the window.
So I guess this is not the good way to do what I’m trying to do. 
Maybe I should try this? https://colorlibsupport.com/t/full-width-header-image/
Or what else?