div with background-image has 0 height in tailwind

Question

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>

t1m0n · Accepted Answer · 2021-02-27T13:14:05.770

4

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.

edited Feb 27 '21 at 13:14

answered Feb 27 '21 at 13:08

t1m0n

3,413
1
17
21

score 2 · Answer 2 · answered Feb 27 '21 at 13:24

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>

div with background-image has 0 height in tailwind

2 Answers2