How to use bg-cover In CSS
The “bg-cover” class in Tailwind CSS ensures full coverage of the background image within the container.
Syntax:
<element class="bg-cover">
<!-- Your content goes here -->
</element>
Example: Implementation to show bg-cover property.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Full Coverage</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"></head><body class="min-h-screen flex items-center justify-center bg-gray-300"> <div class="bg-cover w-64 h-64 border border-black"> <p class="text-green-500 text-center">Full Coverage ( bg-cover)</p> </div></body></html> |
Output:
How to Control the Background Size in Tailwind CSS ?
To control background-size in Tailwind CSS, use the bg-{size} utility classes. These classes allow you to adjust the background size, providing options like bg-cover for covering the entire element, bg-contain for fitting the content within, and custom sizes such as bg-auto or bg-50%. Tailwind simplifies background sizing, offering flexibility and ease of customization for a seamless design experience.
Table of Content
- Using bg-cover
- Using bg-contain
- Using bg-auto