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>;