Header image cropping badly

We uploaded a new header image for the Alizee theme at the recommended size, 1920 X 550 px. Unfortunately this appears to be way too big, as browsers are cropping both the height and width of the image, making it impossible to tell this is a speeding truck. See truckingmpg.com

How can we resize the image to show full width and height on a normal browser screen, which certainly is NOT 1920 px wide? And in a smartphone the image does not resize so it is even worse. Maybe there is some viewport code missing?

Thanks for the nice theme - trying to make it work for us.

It’s a background image, not an actual image so it may be a little tricky. You could add this:


.site-header:after {
     background-size: contain;
}

Depends on what you understand by normal browser screen. There are plenty that are 1920px wide or even higher.

Thanks Vlad! I will try this solution!
Buck

You can see the theme at http://www.truckingmpg.com

Your code constrains the width of the image but not the height.
A true responsive theme adjusts both the width and height for each browser including smartphones so there is no distortion. This is not a true responsive theme!

See for example my company site at http://www.lciweb.com which is truly responsive. Can you help me out here Vlad? Are any of your themes truly responsive?

You’re comparing images with background images and you expect the same behavior from them. And you’re being disrespectful to the work done here. I’m sorry, this discussion ends here.

My apologies Vlad. I am feeling very frustrated because we love the look of the theme but can’t make it work. We are not coders but have many years of experience as Wordpress site admins. You are doing great work at athemes and are gracious to offer some of your themes for free - including support for free themes, which many other theme producers do not.

So, may I ask with all due respect, do you have any similar themes that DO have responsive header images? Or is there any way to modify the code for this background image so it sizes to 100% of the browser window?

Thanks again for your courteous response.