<header>
<h1>This is My Title Text</h1>
  </header>
<p><a href="https://www.sitepoint.com/community/t/should-be-easy-whats-the-best-way-to-do-this/283430?u=sama74">https://www.sitepoint.com/community/t/should-be-easy-whats-the-best-way-to-do-this/283430?u=sama74</a></p>

* {
  outline: 1px dotted red;
}
header {
  text-align: center;
}
h1 {
  font-size: calc( 1em + 5vw ); /* Dynamic text sizing according to viewport width */
  display: inline-block; /* Makes the h1 no wider than the text it contains */
}
h1::after { /* Pseudo element after the h1 (same width as) */
  content: ''; /* empty */
  display: block; /* put on new line */
  background-image: url(http://www.lorempixel.com/800/200); /* The BG image */
  background-size: 100%; /* Fill the width of the title */
  padding-bottom: 25%; /* Padding-bottom in percentage. Percentage value depends on the image aspect ratio. Eg: 200 is 25% of 800 */
}