Ed Shee Ed Shee - 19 days ago 7
CSS Question

Can't get image to vertical align bottom

I'm trying to align the image at the bottom of the page. The div is 100% height but vertical-align: bottom doesn't seem to work.

JSFiddle Here

HTML:

<div class="container-fluid">
<div class="row" id="bg">
<div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
<div class="leftlayer-gradient hidden-md hidden-lg text-center">
<img src="https://imageog.flaticon.com/icons/png/512/3/3907.png" class="down-image">
</div>
</div>
</div>




CSS:

#pic {
background-image:url("left.jpeg");
background-size: cover;
background-position: right;
}

.leftlayer-gradient {
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 70%, rgba(0,0,0,0.5)); /* Standard syntax (must be last) */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.down-image {
height: 8vh;
vertical-align: bottom;
border: 0;
}

Answer

I don't think you are using vertical-align correctly.

Set the image a position absolute and the bottom value to 0:

.down-image {
    bottom: 0;
    position: absolute;
}

#pic {
  background-image: url("left.jpeg");
  background-size: cover;
  background-position: right;
}
.leftlayer-gradient {
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.5));
  /* Standard syntax (must be last) */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.down-image {
  position: absolute;
  height: 8vh;
  bottom: 0;
  border: 0;
}
<div class="container-fluid">
  <div class="row" id="bg">
    <div class="col-md-6 col-lg-6 col-sm-12 col-xs-12" id="pic">
      <div class="leftlayer-gradient hidden-md hidden-lg text-center">
        <img src="https://imageog.flaticon.com/icons/png/512/3/3907.png" class="down-image">
      </div>
    </div>
  </div>