Bootstrap fit a large image background to his box

[whisher]

Hi,
how to fit a large background image to his
box ?

html

<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 -->

css

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('pan.jpg');
      }
      .two{
        height: 200px;
        line-height: 200px;
        background-color: green;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: contain;
        background-image: url('pan.jpg');
      }
      .three{
        height: 200px;
        line-height: 200px;
        background-color: yellow;
        background-repeat: no-repeat;
        background-position: top left;
        background-size: auto;
        background-image: url('pan.jpg');
      }

but none of these works.

[SamA74]

Do you have a live version of the site?
That should work, but there could be a specificity issue if there is other css code overriding these rules.
What do you see? Do you get the red background and no image, or a different background colour/image?

[whisher]

No, I don’t have a live site example.
The rules works but it’s not what I want
to get as layout (the large img dont fit the box)

[SamA74]

Looking at the code again, you are using three different background size settings.
Each are working as expected.
What result did you want to see?

[whisher]

I know all are working as expected
but none do my goal
(the large image should fit the element box
as cover do for the small one )
Put it in this case I’ve got
box 200X300
image 800X1200

the image should fit the box
(I can see the whole image)
200X300

I hope to have expained my self

SORT OF (but withe the background)
Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element. To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

[ronpat]

Perhaps you can post one or two annotated images that show what you wish to see. (desktop and mobile sizes)