CODEWITHSUNDEEP
htmlcssreactjs
peachpops
peachpops

Reputation: 37

Set image as full background in React.js

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:

background only showing in part of a section of the 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!!

Upvotes: 1

Views: 781

Answers (1)

Abdelmonaem Shahat
Abdelmonaem Shahat

Reputation: 544

  • 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;
}

Upvotes: 1

Related Questions