ReactJS InertiaJS Tailwind Image as Background Cover

Hey, inertiajs how am I get to get a back ground to cover for that individual page. I have tried two ways without success

	<div className="h-screen">
                <div className="bg-[url('storage/imgs/front-page/bg-2.png')] bg-hero bg-no-repeat bg-cover bg-center bg-fixed">
</div>
</div>

The above displays the bg but it doesn't cover the page, only covering if their is content filling the height.

.welcome-background {
    background-image: url("storage/imgs/front-page/bg-2.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

Sinnbeck

3 years ago

Best Answer

Level 102

You need to give it full height as well. Try h-full or h-screen on the child div

1 like

Randy_Johnson

3 years ago

Level 8

<div className="min-h-screen bg-[url('storage/imgs/front-page/bg.png')] bg-hero bg-no-repeat bg-cover bg-center bg-fixed"></div>

azimidev

3 years ago

Level 55

Also

background-position: right top;

should be

background-position: center;

and <div className="welcome-background h-screen">

Please or to participate in this conversation.