title: How to show the center of a background image when the screen is resized in CSS/React JS
body: <p>I am creating a website using React JS and I want it to have a background image with fixed height and width and when the screen is resized, the center of the image is shown. But what I have is that the left side is showing from the image when the screen is resized. Here is the JSX and CSS code.</p>
  <p>JSX</p>
  <pre><code>class Home extends Component {
    render() {
      return (
          &lt;div className=&quot;screens-container&quot;&gt; 
            &lt;div className=&quot;image-container&quot;&gt;
              &lt;img className=&quot;background-img&quot; src={background} alt=&quot;&quot;&gt;&lt;/img&gt;
            &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  <p>CSS</p>
  <pre><code>.screens-container {
    width: 100%;
  }
  
  .image-container {
    width: 100%;
    height: auto;
    background-color: red;
    overflow: hidden;
    position: relative;
  }
  .background-img {
    height: inherit;
    object-fit: cover;
    object-position: 0 100%;
  }
  </code></pre>