W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

#bg-image {
  background-image: url("/w3images/photographer.jpg");
  background-color: #cccccc;
  height: 300px;
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

h1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: white;
  font-size:50px;
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4638549725433695" crossorigin="anonymous"></script><script src="//www.p2hp.com/tj.js"></script></head>
<body>

<p>Page content..</p>
<p>Note that this technique will also make the image responsive: Resize the browser window to see the effect.</p>
<p>This is a modified version of <a href="tryit.php?filename=trycss3_background_hero" target="_blank">hero image demo</a>.</p>

</body>
</html>