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-fixedetc.
<div class="w-full relative bg-no-repeat bg-cover h-[500px] rounded-xl overflow-hidden"
style"background-image: url(...);">
</div>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
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>;
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More