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