<div class="element">
  <p>| Content starts here.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea sunt molestias et, architecto, ad excepturi amet corporis aliquam ex quis repellendus ut ullam quia consectetur dicta! Consectetur ea temporibus ad.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, dolorum, aspernatur. Unde hic et, placeat magni inventore expedita ullam, mollitia sed, suscipit iste, molestias cum culpa numquam quaerat ad enim.</p>
</div>
<p>The element has a translucent 20px black border applied to it. Notice how the image is positioned at the top left corner of the padding area of the element.</p>
<p>Image courtesy of Freepik.com</p>

.element {
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  padding: 2em;
  border: 20px solid rgba(0,0,0,0.5);
  background-color: beige;
  background-image: url(http://cdns2.freepik.com/free-photo/foggy-pine-forest_426-19323742.jpg);
  background-repeat: no-repeat;
}
p {
  text-align: center;
  padding: .5em;
}
.element p {
  text-align: left;
  background-color: rgba(255, 255, 255, .4);
  line-height: 1.5;
  margin: 0;
}