I uploaded an image of the recommended size in our website’s header, but the image is not responsive as it is in your demo site. It shows only a portion of the image on a mobile phone, for example.
Background image will act on that way only. The images on the demo are not background. They are slider kept on banner sidebar.If you want to have responsive image , drag text widgets to Banner sidebar and place the image html on this way: <img src="your image url" />
As a suggestion, since most themes provide for being responsive, the static header should have a setting under Customizing and then Header Image to be able to select it being responsive or not so that it resizes accordingly.
When having to use a widget to present the header, there is extra minute work to display header image and banner sidebar on the front page only.
Many themes have that header image responsiveness by default and I feel that adding this would really enhance this Flat Responsive theme.
I also wanted to add that I have a banner graphic to use as a header image and it is 2400 × 900. The image does not scale by default when using as an image header. I also tried 2400 × 770 and still it is way outside the container area. Only when adding it to a text widget does it resize accordingly.