Image in background without background-image

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="parent">
  <img src="https://images.unsplash.com/39/wdXqHcTwSTmLuKOGz92L_Landscape.jpg" />
  <div class="text">
    <h1>Aenean Euismod Etiam</h1>
    <p>Nulla vitae elit libero, a pharetra augue. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
    <div class="btn btn-primary">Primary button</div>
  </div>
</div>

CSS

img {
  max-width: 100%;
  height: auto;
}

.parent {
  position: relative;
}

.text {
  position: absolute;
  top: 20%;
  width: 100%;
  text-align: center;
}