<div class="container">
      <div class="row">
        <div class="col-md-4 one">
         <div><p> cover </p></div>
        </div>
        <div class="col-md-4 two">
          <div> <p> contain </p> </div>
        </div>
        <div class="col-md-4 three">
          <div> <p> custom </p> </div>
        </div>
      </div>
    </div><!-- /.container -->
body {
        padding-top: 60px;
      }
      .one{
        height: 200px;
        line-height: 200px;
        background-color: red;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: cover;
        background-image: url('http://www.lorempixel.com/400/400/');
      }
      .two{
        height: 200px;
        line-height: 200px;
        background-color: green;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: contain;
        background-image: url('http://www.lorempixel.com/400/400/');
      }
      .three{
        height: 200px;
        line-height: 200px;
        background-color: yellow;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto;
        background-image: url('http://www.lorempixel.com/400/400/');
      }
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.