title: Styling for a Header text breaks layout of a background image
body: <p>I created the background image <code>class=&quot;Background&quot;</code> Fitted to the screen.<br />
  But when i add styling css to a header <code>class=&quot;Greetings&quot;</code> to create text on a website, the background layout breaks.</p>
  <p>How to stop this from occuring?<br />
  HTML:</p>
  <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class=&quot;Background&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;Greetings&quot;&gt;
        &lt;h1&gt;
          The City Crown &lt;br /&gt;
          One of a Kind Place
        &lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class=&quot;Buttonmenu&quot;&gt;
        &lt;h1&gt;&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>* {
    padding: 0;
    margin: 0;
  }
  .Background {
    background: url(./Images/IndexBackground.jpg);
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .Greetings {
    height: 100%;
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
  }
  </code></pre>
  <p>Any advice will be appreciated!</p>