How to scale an image with the width of the device?

How to scale an image with the width of the device?

I'm searching for a way to scale my header image correctly with the width
of the users device.
I want to put an 960px wide image in the header of my container area, thus
in the center of the (wordpress) website. Now, outside the container the
header will continue. The surrounding images that are still part of the
bigger picture need to scale down when the width of the device decreases.
However, right now those images will move to the right, which is not my
purpose. I'd like to have the image left of the container staying in
place, and to fall off the screen on the left side when the width
decreases.
Very difficult to explain. I hope you will understand me :) How do I
achieve this using CSS?
Thank you very much in advance.
Edit: To make the question more clear. This is an example of the header
image:

This image is 1920px wide, and I want to split it up in a center part of
960px wide and 2 surrounding area's. The colorscheme going from light in
the middle to dark orange on the sides should be kept as it is now. For
that I want the darker parts to fall off the screen when the width
decreases. How can I achieve this?