Is there a way to have an image show its right side when resized and cropped for mobile?

I am making a website and I have a cover image as the background to a masthead section. The image is set with background-size: cover. When the website is scaled for mobile, the right side of the image gets cut off. I wonder if it is possible to force the image to just slide to the left in mobile, so that the right side of the image remains visible?

The CSS I am using:

#example {
  background: url("../img/image.png"), #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
}

Similar effect occurs here when you resize the window: https://www.w3schools.com/cssref/tryit.php?filename=trycss3_background-size

Solution

Use the background-position property to control how the image is positioned within its container.

#example {
  height: 300px;
  background: url("https://images.pexels.com/photos/931881/pexels-photo-931881.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"), #ffffff;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}

<div id="example"></div>