CODEWITHSUNDEEP
twitter-bootstrapcsstwitter-bootstrap-3
Antonio Carbone
Antonio Carbone

Reputation: 125

Row Bootstrap with image background and column

I've a problem. I think so simple but I don't understand the right way.

My simple code:

<div class="row">

<div class="col-sm-4">
      some text and 2 buttons
</div>

</div>

Well,I want a responsive backgroung image in row. Inside there's a column with some text and 2 buttons (as a figure)

figure

Important is responsive way.

Thanks for help me !

Upvotes: 2

Views: 3865

Answers (5)

Azman
Azman

Reputation: 1

None of these work for me and many others I found and tried too. I found it is not possible to make the div ( row) responsive to the same size as the image.

I also found I had to put a fixed height on the image ( or the div/row) to get the image to show at all and then become responsive... then that left an empty space between that row with the image and the next row below it.

After much searching for an answer I found other posts that clearly state that it is not possible to responsively size and resize a background image to the row it is in in height, as the image will shrink but leave the space remaining in the height of the row blank.

Upvotes: 0

Kishan Patel
Kishan Patel

Reputation: 509

If you want the image to adapt based on the size of the browser window use this code:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

And remember don't set height and width of the image. For more info check this MDN article.

Upvotes: 2

Ridhik
Ridhik

Reputation: 25

Use this.

.row {
background: url('portfolio.jpg');
background-size: cover;
padding-bottom:10%;
}

Upvotes: 0

Vlad Dekhanov
Vlad Dekhanov

Reputation: 1084

I suggest you to use this way.

.row {
    background: url(/src/assets/images/bg_pic.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
}

Upvotes: 0

Rakesh Soni
Rakesh Soni

Reputation: 1343

use 

.row {
background-image: url('yourimage.jpg');
background-size: cover; /*That will make it responsive*/
}

Upvotes: 0

Related Questions