Full size background image for col-*-* in Bootstrap

Question

i already found some questions regarding this topic but none of them could really help me solving my problem.

I like to build a simple Bootstrap grid looking like this:

<div class="container-fluid"> 
  <div class="row">
    <div class="col-sm-8"> Some Text </div>
    <div class="col-sm-4">
      <img src="..." alt="Full Size Background Image" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <img src="..." alt="Full Size Background Image" />
    </div>
    <div class="col-sm-8"> Some Text </div>
  </div>
</div>

The col-sm-4-DIVs should contain a full size background image with the same height as the text and no padding.

Here's a photo of what I mean. I want the background image to cover the red area:

See Example

Any ideas how to do that?

Thank you very much for your help!!!

Answer 1

First option, you can set min-width:100% in your img tag:

img {
    min-width: 100%;
}

Or Second option, you can set the image as a background and set it in the div that you want:

<div class="col-sm-4 full-img">

And the css:

.full-img {
    background-image: url("....");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}