1

I have a background photo at the first of each page of my react project. The header and navbar and an introduction is placed on it. So it should almost keep its height in smaller screens somehow to cover all contents that is going to be over it, but it's clear that I can't observe the proportion for width. So I won't have a responsive photo in smaller screens. I should mention that I know the contain mode, but I wasn't sure that there isn't any substitute better way. Can you help me with this issue? Here's how I set it now:

  <div
        style={{
          backgroundImage: `url("${Peace}")`,
          backgroundSize: "cover",
          backgroundPosition: "center top",
          backgroundRepeat: "no-repeat",
          height: "calc(130vh - 50px)",
        }}
      >
        <Header />
        <Navbar />
        <div className="homeStrategy text-start">
          <h1 className="homemainTopic">
            <span>mentalland</span> where you can learn, improve, get calm & Be
            happy
          </h1>
          <h2 className="homesubTopic">
            Lorem ipsum dolor sit amet consectetur. Amet velit convallis amet mi
            leo aliquet in vestibulum consectetur.
          </h2>
          <div className="homelink">
            <Link to="/" className="learnMore">
              <span className="more">Learn more</span>
            </Link>
          </div>
        </div>
      </div>
Saba S
  • 27
  • 6
  • Sounds like `background-size: cover` is what you want. I'm not sure how your code works, but it looks like you should be using `background-size`, `background-image` etc. – ralph.m Jul 07 '23 at 00:40

0 Answers0