<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla harum eaque ipsam magni autem id quod quae quas, facere eius quam? Ullam, laboriosam.</p>
</div>
@import url(https://fonts.googleapis.com/css?family=Raleway:600);

html {
  font-size: 60%;
}

body {
  padding:0; margin:0;
}

.container {
  position: absolute;
  
  margin: 0 auto;
  padding: 0;
  
  height: 80%;
  width: 80%;

  top: 4%;
  left: 0;
  right: 0;
  
  border: 5px solid #E0E7F0;
  
  background: url("https://images.unsplash.com/photo-1460500063983-994d4c27756c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=27c2758e7f3aa5b8b3a4a1d1f1812310");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 35% center;
}



p {
  position: absolute;
  display:inline-block;

  margin:0 auto;
  padding: 30px;
  
  left: 8%;
  bottom: 8%;
  
  width: 25%;
  max-width: 250px;
  min-width: 150px;
   
  font-family: "Raleway";
  font-size: 1.25rem;  
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5rem;
  line-height: 2.25rem;
  color: #E0E7F0;

  border: 5px solid #E0E7F0;
}

@media (min-width: 800px) { 
  html {
    font-size: 70%;
  }
}
@media (min-width: 1200px) { 
  html {
    font-size: 90%;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.