Question Details:

I Was Trying to set the background image in react but the positioning is not working properly. The Image gets zoomed a lot, Plus when I change the property of background-size from cover to contain, It will squeeze to the center instead of taking the full width of the container.

React Component

import React from 'react'
import arrow from '../images/icon-arrow-down.svg'
function Showcase() {
  return (
    <div>
        <section className="showcase">
            <div className="overlay">
                <h1>We are creative</h1>
                <img src={arrow} alt="" />
            </div>

        </section>
    </div>
  )
}

export default Showcase;


----------

CSS Code

**<!-- language: lang-css -->**

    /*ShowCase*/

    .showcase{
      background-image: url('./images/mobile/image-header.jpg');
      height:100vh;
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size:  100%
    }
    .showcase .overlay{
      height:512px;
      display:flex;
      align-items: center;
      justify-content: center;
    }

<!-- end snippet -->

The Preview of Output is [1]: https://i.stack.imgur.com/M1NRu.jpg