You can actually define an image or a background (with CSS) that fits the area in which is it shown.

For a simple image use a width of 100%, then the browser computes the height for you.

  <div class="header"><img src="images/background.png" width="100%"></div>

This code will make the image width match the width of the <div> tag. Assuming the <div> tag fits the screen width, it will show in the full width, stretching as required.

When trying to do that with a background image in CSS, you want to use the background-size parameter which defines how the width reacts. The parameters can be a percentage, but that does not always work as expected. You can also set it up with cover, making the image at least as wide as the the screen (but does not resize if large enough) or contain so the image gets resized (very useful if you want to fit a smart phone, mobile screen.)

  header {
    background: white url(images/background.png) no-repeat 50% 0;
    background-size: contain;
  }

You probably can specify the size in the background style, only I do not know the right location. The X and Y positions may not make much sense when the size is set to contain.