JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur
    passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.</p>
</div>

<div class="main">
  <div class="main_background"></div>
  <div class="main_image">
    <img src="http://konsult-concept.no-ip.org/test/a_table.png" alt="Lorem">
  </div>
</div>
 
<div style="padding-top:1em;position:relative;background:linear-gradient(to bottom,transparent ,rgba(255,255,255,0.5) 1.5em)">
  <p>Paphius quin etiam et Cornelius senatores, ambo venenorum artibus pravis se polluisse confessi, eodem pronuntiante Maximino sunt interfecti. pari sorte etiam procurator monetae extinctus est. Sericum enim et Asbolium supra dictos, quoniam cum hortaretur
    passim nominare, quos vellent, adiecta religione firmarat, nullum igni vel ferro se puniri iussurum, plumbi validis ictibus interemit. et post hoe flammis Campensem aruspicem dedit, in negotio eius nullo sacramento constrictus.</p>
</div>

CSS

.main {
  height: 250px;
  width: 100%;
  position: relative;
}

.main_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background: url(http://lorempixel.com/output/food-q-c-1920-727-4.jpg) center center;
  border-bottom: 2px solid black;
}

.main_image {
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
}

.main_image img {
  max-width: 100%;
  height: auto;transform:translatey(31.8%)
}