<div class="bg"></div>
<div class="content">
  <header>
    <h1>Clear Text Over Any Background</h1>
    <p>Brightness and contrast on the background dropped to 70% to keep the text easy to read over any image. Ideal for using with user defined images. Reload the page to get a new random image.</p>
  </header>  
</div>

.bg {  
  background-image:url(https://picsum.photos/600/600/?random);
  background-repeat:no-repeat;
  background-size:cover;
  bottom:0;
  filter:contrast(.7) brightness(.7);  
  left:0;
  position:fixed;
  right:0;
  top:0;
}

.content {
  align-items:center;
  bottom:0;
  color:white;
  display:flex;
  flex-wrap:wrap;
  font-family:sans-serif;
  justify-content:center;
  left:0;
  padding:20vw;
  position:fixed;
  right:0;
  text-align:center;
  top:0;
}

h1 {
  font-weight:normal;
}

setInterval(window.location.reload,3000);