I have written code like this :-
import React from 'react'
function OurCourse() {
return (
<div className='w-full '>
<div className='w-full h-[390px]' style={{
backgroundImage:'url(https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80)',
backgroundSize:'contain',
backgroundRepeat:'no-repeat',
}}>
</div>
</div>
)
}
export default OurCourse
I want to set this background image according to the size of its div which is given in its className but the image that appear is like this after it runs
I want output like this
i can make the text but not the background image as it appears
2
Answers
You can set the url with an arbitrary value in TailwindCSS, so you don’t have to use a combination of the style object and classes. As mentioned in the comments, the best way to do what you want is to use the background-size property set to
cover
.Also, try not to use w-full or width: 100%. The default ‘auto’ or natural behavior of block elements in HTML is to fill the available space 100%, so you should almost never need it.
use the below CSS properties to the div for showing the center portion of the background image
Sample Code