Tailwind CSS Background image

Basic example

Use an image as a background in 3 steps:

Add background-image via inline CSS.
Define the background height.
Add .bg-cover class to scale the image properly and enable responsiveness.

HTML

        
            
        <div
          class="bg-cover"
          style="background-image: url('...'); height: 400px"></div>

Jumbotron

Outstand your call to action elements by catching the eyes to some beautiful image in the background. To provide a proper contrast it's highly recommended to use a mask.

Heading

Subheading

HTML

        
            
        <!-- Jumbotron -->
        <div
          class="relative overflow-hidden rounded-lg bg-cover bg-no-repeat p-12 text-center"
          style="background-image: url('...'); height: 400px">
          <div
            class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-fixed"
            style="background-color: rgba(0, 0, 0, 0.6)">
            <div class="flex h-full items-center justify-center">
              <div class="text-white">
                <h2 class="mb-4 text-4xl font-semibold">Heading</h2>
                <h4 class="mb-6 text-xl font-semibold">Subheading</h4>
                <button
                  type="button"
                  class="rounded border-2 border-neutral-50 px-7 pb-[8px] pt-[10px] text-sm font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
                  data-te-ripple-init
                  data-te-ripple-color="light">
                  Call to action
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Jumbotron -->

Cards with background image

To get a card with a background image, use the card component and add a background image to it as in the basic example, skipping the second step (setting the image height).

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

HTML

        
            
        <div
          class="block max-w-sm rounded-lg bg-white bg-cover p-6 shadow-lg dark:bg-neutral-700"
          style="background-image: url('...');">
          <h5
            class="mb-2 text-xl font-medium leading-tight text-neutral-800 text-white dark:text-neutral-50">
            Card title
          </h5>
          <p
            class="mb-4 text-base text-neutral-600 text-white  dark:text-neutral-200">
            Some quick example text to build on the card title and make up the
            bulk of the card's content.
          </p>
          <button
            type="button"
            class="inline-block rounded border-2 border-neutral-50 px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-neutral-50 transition duration-150 ease-in-out hover:border-neutral-100 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-neutral-100 focus:border-neutral-100 focus:text-neutral-100 focus:outline-none focus:ring-0 active:border-neutral-200 active:text-neutral-200 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10"
            data-te-ripple-init>
            Button
          </button>
        </div>

Background image

Basic example

Jumbotron

Heading

Subheading

Cards with background image

Card title

Card title

Related resources