<div class="uk-cover-background uk-position-relative">
  <img class="uk-invisible" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg" alt="">
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
    <p>Praesent interdum metus in sem volutpat rhoncus.</p>
  </div>
</div>
div.uk-cover-background {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/moon.jpg);
}

div > p {
  font-size: 18px;
  color: #fff;
  padding: 20px;
  background: rgba(0, 0, 0, .4);
}
// Image from New Old Stock
// http://nos.twnsnd.co/post/149655436306/full-moon-over-the-alps-stefano-de-rosa

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.