How to fit an background image with Tailwindcss?

user_14835590 0
Viewed 65

I have an image with a height of 300px and a width of 1600px. I want to use it as a background image in a div element.

But when I make the height of the div more than 300, it does cover the width but at the top, there remains an empty space.

I want the background image to cover the entire div both in height and width.

This is the result when the height is 450 px. This is the result when the height is 450px

I am using tailwindcss and next.js

<div className="bg-[url('/image.jpg')] w-full h-[250px] bg-center-bottom bg-no-repeat bg-cover mb-8 md:bg-cover md:h-[350px]">
</div>
tailwind-css reactjs css
2 Answers

Cover Use bg-cover to scale the background image until it fills the background layer.

<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
user_155704520

Try this, but it is the same answer as the previous one and (md:bg-cover) breakpoints are not needed.

<script src="https://cdn.tailwindcss.com"></script>
<div class="bg-[url('https://plchldr.co/i/1600x300?&bg=67229f&fc=f8f8f8&text=1600x300')] w-full h-[250px] bg-cover bg-center bg-no-repeat mb-8 md:h-[350px]"></div>
enter image description here

user_155451160
Related