Set image as full background in React.js

Question

I'm trying to set an image to stretch across the entire landing page in React.js. I've tried using div tags and having corresponding class names in the css to set this attribute, but am only getting a small section of the page to be the image rather than the whole page:

I'd like for the image to cover the entire page with no white spaces.

This is my .css

    .start-bg {
  margin: 0;
  padding: 0;
  background: url("./images/movierama.jpeg") no-repeat center fixed;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
}

This is my React.jsx file:

      <div className="start-bg">
    <h1 className="landing">
      Welcome to Movierama!
      <p>Explore our movie collection today!</p>
    </h1>

    <Link to="/">
      <button
        className="btn btn-primary"
      >
        Enter
      </button>
    </Link>
  </div>

Bonus: I'm trying to center the button too, but it's not working with the css tags I'm applying. Help appreciated.

Thanks!!

Try changing min-height: 100% to min-height: 100vh. That should get it to be at least the height of the viewport, but it looks like you also have content or a margin keeping it away from the top of the viewport, which might be a separate issue. Another option would be to set a class on body when your component mounts using the DOM api. — ray
– ray, Commented Jul 25, 2020 at 18:55
Alternatively, you could apply min-height: 100% to html, body to ensure that the document always fills the viewport. — ray
– ray, Commented Jul 25, 2020 at 19:10

Abdelmonaem Shahat · Accepted Answer · 2020-07-25 18:53:30Z

1

first try to reset all the default behavior of the browsers like default padding, margins for every element like this:

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

then add full height uding vh rather than % like this:

.start-bg {
  background: url("./images/movierama.jpeg") no-repeat center fixed;
  background-size: cover;
  height: 100vh;
  object-fit: cover;
}

answered Jul 25, 2020 at 18:53

Abdelmonaem Shahat

5422 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

peachpops Over a year ago

It worked!!! That was super helpful!!! Thank you sooo much, Abdelmonaem Shahat!! :)

Abdelmonaem Shahat Over a year ago

I am happy to help :)

peachpops Over a year ago

Thank you, Abdelmonaem!! :)

Collectives™ on Stack Overflow

Set image as full background in React.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related