Centered Overlay

by Sebastian Brosch

HTML

<div class="container">
  <div class="image"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem nulla, sodales laoreet dui id, interdum posuere neque. 
    Aenean tempor volutpat urna, ut elementum urna finibus sit amet. Proin lacinia ultrices tortor sit amet auctor. 
    Etiam sit amet egestas nisl.
  </div>
</div>

CSS

body, html {
  margin:0;
  padding:0;
}
div.container {
  height:250px;
  position:relative;
  display:flex;
  justify-content:center;
}
div.image {
  background:url('http://placehold.it/100x100');
  height:250px;
  width:100vw;
}
div.text {
  border:1px dashed red;
  width:60vw;
  position:absolute;
  bottom:0;
}