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](https://stackoverflow.com/questions/25919687/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>

```