Gradient Background image from 100% to 1%

I have a vue app with laravel. This is my layout that I'm using on every page.

    <div class="flex justify-between flex-col h-dvh">
        <Head :title="title"/>

        <Banner/>
        <Socials/>
        <NavBar/>

        <section class="px-0">
            <div v-if="$slots.hero"
                 class="relative h-124">
                <slot name="hero"/>
            </div>

            <div v-if="$slots.side" class="mx-auto flex max-w-7xl flex-wrap px-4 sm:px-6 lg:px-8">
                <main class="flex w-full flex-col px-3 md:w-3/4">
                    <slot/>
                </main>
                <aside class="flex w-full flex-col px-3 md:w-1/4">
                    <slot name="side"/>
                </aside>
            </div>

            <div v-else class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <slot/>
            </div>

        </section>
    </div>

    <Footer/>

now I want to have a background image start 100 visible and at the bottom 0.

My background is located in my folder storage/public/assets/background.jpg.

How to do this in vue 3 with inertia, Laravel and tailwind 4.1?

LaryAI

1 year ago

Level 58

To achieve a gradient effect on a background image where it starts fully visible at the top and fades to transparent at the bottom, you can use CSS with Tailwind CSS utilities. Here's how you can do it:

Add the Background Image: Use Tailwind's bg-cover and bg-center utilities to ensure the image covers the entire area and is centered.
Apply a Gradient Overlay: Use a linear gradient to create the fade effect from 100% opacity to 0% opacity.

Here's an example of how you can implement this in your Vue component:

<template>
  <div class="flex justify-between flex-col h-dvh">
    <Head :title="title" />

    <Banner />
    <Socials />
    <NavBar />

    <section class="px-0">
      <div
        v-if="$slots.hero"
        class="relative h-124 bg-cover bg-center"
        style="background-image: url('/storage/assets/background.jpg');"
      >
        <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black"></div>
        <slot name="hero" />
      </div>

      <div v-if="$slots.side" class="mx-auto flex max-w-7xl flex-wrap px-4 sm:px-6 lg:px-8">
        <main class="flex w-full flex-col px-3 md:w-3/4">
          <slot />
        </main>
        <aside class="flex w-full flex-col px-3 md:w-1/4">
          <slot name="side" />
        </aside>
      </div>

      <div v-else class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <slot />
      </div>
    </section>

    <Footer />
  </div>
</template>

<style>
/* Add any additional styles if needed */
</style>

Explanation:

Background Image: The style="background-image: url('/storage/assets/background.jpg');" sets the background image for the div.
Gradient Overlay: The bg-gradient-to-b from-transparent to-black class creates a gradient that starts transparent at the top and becomes black at the bottom. You can adjust the colors as needed.
Absolute Positioning: The absolute inset-0 class ensures the gradient overlay covers the entire div.

This setup will give you a background image that starts fully visible at the top and fades out towards the bottom. Adjust the gradient colors and opacity as needed to fit your design requirements.