Add Image Tag in BootStrap Grid

HTML-CSS
1

I’m a beginner in css and bootstrap, and I am trying to add Images to a bootstrap grid below. How do I replace the background color with a perfectly sized image?

Your code so far

</div>

  <div class="container">
    <div class="col-sm-12" style="height:200px ">
                                      
    <div class="row ">
      <div class="col-xs-1 col-sm-4 " style="background:brown;height:200px; "></div>
      <div class="col-xs-1 col-sm-4 " style="background:black;height:200px; "></div>
      <div class="col-xs-1 col-sm-4 " style="background:orange;height:200px; "></div>
    </div>
    
    
    <div class="row ">
      <div class="col-sm-4 " style="background:red;height:200px; "></div>
      <div class="col-sm-4 " style="background:blue;height:200px; "></div>
      <div class="col-sm-4 " style="background:yellow;height:200px; "></div>
    </div>
    
    <div class="row ">
      <div class="col-xs-1 col-sm-4 " style="background:brown;height:200px; "></div>
      <div class="col-xs-1 col-sm-4 " style="background:black;height:200px; "></div>
      <div class="col-xs-1 col-sm-4 " style="background:orange;height:200px; "></div>
    </div>
    </div>
  
  </div>```

**Link to the challenge:**
[Codepen Link](https://codepen.io/jtaylorknox/pen/QmObyy?editors=1100)
2

I suggest not using the img tag and instead make a div and then add css:

background-image: url(‘yourURL’);

You may want to look into background properties like background-size, background-position, etc depending on what you want to achieve.

If you want the image to fit you could try background-size: contain or background-size: cover

Hope this helps.