How to make background image clip on left side instead of right when resizing

Question

Whenever I resize the window, my background image gets clipped on the right side, while the left size of image remains fixed. Is there any way to reverse that behavior, and make the background-image clip on the left side?

header {
  width: 100%;
  height: 300px;
  background: url(http://www.miis.edu/system/files/media/sailboats_0.jpg);
}

<header></header>

I have a Plunkr demo here.

Answer 1

This may or may not fit your needs but you could give a background-position of right 0 to the element in order to position the background image at the right/top of the box.

Example Here

header {
  width: 100%;
  height: 300px;
  background: url(http://www.miis.edu/system/files/media/sailboats_0.jpg);
  background-position: right 0;
}

This won't work with SVG, however. In the case of applying this CSS to an SVG image, you'd need to use it on an SVG element in your markup.