<div class="bg-image">
  <h1>Heading</h1>
  <div class="text-container">
    <p>Just some text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Quod, repellendus at inventore, sapiente consequuntur aut sunt dolorem, doloribus ut quibusdam et temporibus iusto qui repudiandae, consectetur dolores omnis soluta autem.</p>
  </div>
</div>

.bg-image {
  padding: 20px;
  width: 400px;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  
  /* defines only the background image */
  background-image: url(https://picsum.photos/id/1031/500/400);

  /* difines a gradient and a background image */
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)),
                       url(https://picsum.photos/id/1031/500/400); */
}
h1, p {
/*   color: white; */
/*   text-shadow: 1px 1px 3px #444; */
}
h1 {
/*   background-color: white; */
/*   display: inline-block; */
/*   line-height: 1; */
/*   padding: 12px; */
}
.text-container {
/*   background-color: white; */
  /* sets the color with alpha transparency */
/*   background-color: rgba(70, 130, 180, 0.8); */
}

// This example is from my YouTube series, Decoded by Christina: https://youtu.be/d-wqoTrmwkY