CODEWITHSUNDEEP
htmlcsstailwind-css
Filip
Filip

Reputation: 945

div with background-image has 0 height in tailwind

I want my image to take up the entire screen until I scroll and reveal more content.

I want exactly this: I want to make an image fullscreen until I scroll

but I can't get it working, the div has 0 height and only thing that changes it is putting something in there, eg. some text. But it just inherits the text length. I'm using react and tailwind and I have already tried min-h-full h-full pretty much everywhere but I can't get it working.

    <div className="relative">
      <div
        className="h-full w-full min-w-full min-h-full"
        style={{
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
          backgroundImage: `url(${img})`,
        }}
      >
        text //This makes the div to have the height of 30px. Without this, height is 0.
      </div>
  </div>

Upvotes: 1

Views: 3744

Answers (2)

Temani Afif
Temani Afif

Reputation: 272817

You need to use h-screen

<div className="relative">
      <div
        className="h-screen w-full "
        style={{
          backgroundSize: "cover",
          backgroundAttachment: "fixed",
          backgroundImage: `url(${img})`,
        }}
      >
        text //This makes the div to have the height of 30px. Without this, height is 0.
      </div>
  </div>

Upvotes: 2

t1m0n
t1m0n

Reputation: 3431

Without any content div height will be 0px. Add min-height: 100vh to styles object, to make div to fill entire screen.

vh means viewport height, and 1vh is equal to 1 percent of window height.

Upvotes: 5

Related Questions