While we can add a header image, and a color background for header, I would like to add a background image to header instead of a color. Is it possible?
My intention is to simulate a full width image. My background image would be the side extensions of the normal header image.
You can use Custom CSS to add any image as background for any element. Here is how you could do it for navigation bar for Sparkling theme.
.navbar.navbar-default {
background: url('https://colorlib.com/sparkling/wp-content/uploads/sites/5/2014/03/slider-image-blurry.jpg') fixed center;
}
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?
Of course adding one element to another with different sizes won’t work on all device screen sizes.
You can try to use solution I provided on that support thread but there are also certain limitations with it but it is worth the shot as there is not much else you can do.