Thank you so very much for your response! I really appreciate it! :) This has been driving me mad for a long time, I really want to get to the bottom of it. (And yes: I must have set the post to "resolved" by accident, have fixed that now, thank you.)
So the .png / horizontal colour fade repeat idea is very clever! I will do this. It is certainly better than what I currently have (tiling the whole header image horizontally so that when you zoom out, you see repeats of the title & the owl, which looks terrible).
However, my main problem remains - I can't seem to get a fixed 100% width header image to take up the entire width of browser. Like if I were to try your .png suggestion, I don't know how I can make the .png "the width of the website", like you say. It should be so simple!
I have obviously tried uploading the header image in the usual way through ""Theme Settings" > "Header". In the settings, it states Default width is 1000px, the height (and full width option) can be adjusted above. So I uploaded a header that is 1000px wide but it just ends up looking like this.
I set the "Header width" to "default" as you suggested, instead of "full width". The "Website width" is also set to 1000px. So I really don't know why the 1000px wide header ends up the left & not the full width of the site? I am wondering if there is anything I should add to the "Header height" settings (currently blank). There, it says Your header height in px (and navigation position (y) at the same time), just enter a number. This is not your header image height, you can specify your header image separately in the fields below. Try 25px or 63px less than your header-image-height to fit perfectly ...which I find a bit confusing?
I have also tried leaving the "Header image" setting blank and instead attempted to overwrite the CSS in both:
"Appearance" > "Editor" > "style.css"
"Appearance" > "Theme Settings" > "CSS"
but that didn't work either :c
The reason I care so much about this is because I want to adjust the owl part of the header image to have him sitting on a tree and I want the tree to come to the right edge of the header, no matter how zoomed in or out the browser is.
I wonder if I need to make a change to the header.php file? I don't know what is telling the header to behave this this. I suppose I just need advice from someone who really understands the intricacies of the Custom Community theme's code. Or simply a pair of fresh eyes to tell me why I am being dumb!
Thank you so much in advance! And please forgive the length of this.