• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

164
Views
Why Background Image not Taking Full Width in React

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

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error