Responsive background with its height based on the adjacent column using bootstrap

Question

How can I have a full image background inside a column but without knowing the height of it? Im using bootstrap and I need the image to be responsive. Please look at the image for a better understanding

<div class="  col-xs-12 col-sm-5 col-md-5 col-lg-4 bgimage">
 </div>
 <div class="   col-xs-12 col-sm-7 col-md-7 col-lg-8">
</div>
with .bgimage
{
 background-image: url(../img/user.jpg);

    background-size: cover;

}

Have added this css code background-image: url(../img/user.jpg); background-size: cover; but the image is not showing — FerchoCarcho, Jun 16 '15 at 16:07
Check out this answer http://stackoverflow.com/questions/30608667/get-background-image-or-text-to-fill-width-not-repeat-but-not-stretch-vertical/30609653#30609653 — Yandy_Viera, Jun 16 '15 at 16:15
I just did , no code inside the column tag I just need a background image at the left of my riders feedback. — FerchoCarcho, Jun 16 '15 at 16:23

Nanang Mahdaen El-Agung · Answer 1 · 2015-06-16T16:36:13.887

0

Using background-size: cover; will cover the box without losing the ratio.

Using background-size: 100%; will fill the box but will losing the ratio.

EDIT

This is sample how the background works.

.table {
  display: table;
  width: 100%;
}

.cell {
  display: table-cell;
}
.cell.left {
  background-image: url(http://oi58.tinypic.com/2u9mo0g.jpg);
  background-size: cover;
}
.cell.right {
  width: 60%;
  padding: 80px 30px;
  background: #ccc;
}

<div class="table">
  <div class="cell left"></div>
  <div class="cell right">
    Lorem ipsum dolor sit amet
  </div>
</div>

edited Jun 16 '15 at 16:36

answered Jun 16 '15 at 16:07

Nanang Mahdaen El-Agung

1,404
10
14

background-image: url(../img/user.jpg); background-size: cover; only those lines? is not displaying the image – FerchoCarcho Jun 16 '15 at 16:09
Does your box has width and height to show the image? – Nanang Mahdaen El-Agung Jun 16 '15 at 16:18
my box as I just added the html code doesnt have nothing but the background image, maybe Im doing it wrong. Just need an image at the left size of my riders feedback as the image suplied – FerchoCarcho Jun 16 '15 at 16:22
The box must have size to show the background. If the box (`bgimage`) don't have width or height, then nothing to show. If you only need to add image to that box, just add `` inside. – Nanang Mahdaen El-Agung Jun 16 '15 at 16:30

score 0 · Accepted Answer · answered Jun 16 '15 at 20:05

here's a bootstrap example of a column that has background-size:cover

http://jsfiddle.net/maio/7rbjj2fn/3/

.bgimage{
    background-image: url(http://oi58.tinypic.com/2u9mo0g.jpg);
    background-size: cover;
    height:200px
}
.right{
    background:yellow;
    height:100%;
}
.row{
    background:tomato
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div class="  col-sm-5 col-md-5 col-lg-4 bgimage">
    </div>
    <div class="right col-sm-7 col-md-7 col-lg-8">
       Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.  nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper

Responsive background with its height based on the adjacent column using bootstrap

2 Answers2