Background image

Tailwind CSS Background image

Use background image component with Pagedone background of an item.

How to add background images in Tailwind CSS?

To add a background image using Tailwind CSS, you can use the 'bg-<image>' utility class, where '<image>' is the name of the image you want to use as the background. Additionally, you can specify other background-related properties such as size, position, and repeat using additional utility classes.

  • Add background-image via inline css inside div.
  • Add background height.
  • Add other property utility classes according to your requirement. ex:.bg-cover,.bg-contain,.bg-no-repeat,.bg-fixed etc.
<div class="w-full relative bg-no-repeat bg-cover h-[500px] rounded-xl overflow-hidden"
      style"background-image: url(...);">       
      </div>

With CTA and text

Use the following tailwind background image example, which provides an immense look to your section with a CTA button and text. It's highly recommended to use a mask on the background image to improve the readability of the section.

Heading

Subheading
<div class="w-full relative bg-no-repeat bg-cover h-[500px] z-0 rounded-xl overflow-hidden" style="background-image: url('https://pagedone.io/asset/uploads/1707713972.png');">
      <div class="relative top-0 left-0 w-full h-full z-10 bg-black/50 flex items-center justify-center flex-col gap-5 ">
      <h2 class="text-4xl font-bold font-manrope text-white">Heading</h2>
      <h6 class="text-xl font-bold font-manrope text-white">Subheading</h6>
      <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-transparent border border-white  text-white cursor-pointer font-semibold text-center shadow-xs transition-all duration-500 hover:bg-white/25 hover:text-white'>CALL A ACTION</button>
      </div>
      </div>

Cards with background image

To get a card with a background image in tailwind, use the card component and add a background image to it as showing in a below example.

Vintage cars

A vintage car, also known as a classic car, is typically defined as a vehicle manufactured between the early 1900s and the 1970s, although the specific time period may vary depending on the individual or organization.

Toy

A toy is an object or item that is designed for play and enjoyment, typically used by children but also appreciated by people of all ages. Toys come in a wide variety of forms, ranging from simple shapes and objects to complex gadget 

<div class="w-full relative">
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <div class="w-full h-auto bg-no-repeat bg-cover rounded-lg overflow-hidden" style="background-image: url(https://pagedone.io/asset/uploads/1688031162.jpg);">
      <div class="bg-black/40 p-6 w-full h-full ">
        <h3 class="text-3xl font-manrope font-semibold text-white mb-6">Wintage cars</h3>
        <p class="text-base leading-6 text-white font-normal mb-6">  A     A vintage car, also known as a classic car, is typically defined as a vehicle manufactured between the early 1900s and the 1970s, although the specific time period may vary depending on the individual or organization. </p>
        <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-transparent border border-white  text-white cursor-pointer font-bold text-center shadow-xs transition-all duration-500 hover:bg-white/25 hover:text-white'>Book A Ride</button>
      </div>
      </div>
      <div class="w-full h-auto bg-no-repeat bg-cover rounded-lg overflow-hidden" style="background-image: url(https://pagedone.io/asset/uploads/1688031375.jpg);">
      <div class="bg-black/40 p-6 w-full h-full ">
        <h3 class="text-3xl font-manrope font-semibold text-white mb-6">Toy</h3>
        <p class="text-base leading-6 text-white font-normal mb-6"> A toy is an object or item that is designed for play and enjoyment, typically used by children but also appreciated by people of all ages. Toys come in a wide variety of forms, ranging from simple shapes and objects to complex gadget </p>
        <button type='button' class='py-2.5 px-6 text-sm rounded-lg bg-transparent border border-white  text-white cursor-pointer font-bold text-center shadow-xs transition-all duration-500 hover:bg-white/25 hover:text-white'>Buy Now</button>
      </div>
      </div>
      </div>
      </div>;