Question 179202 in CSS Question posted in
Some basic documentation can be found here.

Css – how can i set the image into a certain size box appear properly

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

enter image description here

I want output like this

enter image description here

i can make the text but not the background image as it appears

Tags:

2

Answers


  1. 0

    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.

    function OurCourse() {
  return (
    <div className="h-[390px] bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1532012197267-da84d127e765?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=90')] grid place-content-center"> 
      <h1 className="text-white font-serif text-2xl">Our Courses</h1>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<OurCourse />);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>

<div id="root"></div>

    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.

    Login or Signup to reply.
  2. 0

    use the below CSS properties to the div for showing the center portion of the background image

    {background-position:center;background-size:cover}

    Sample Code

    .h-390 {
  color: #fff;
  position: relative;
  width: 80%;
  display: inline-block;
  height: 180px;
  background-image: 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);
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center;
}

.text {
  top: 46%;
  left: 30px;
  position: absolute;
}
    <div class='w-full h-390'>
  <div class="text">Our courses</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search