title: How to create a white box for content over an image background in HTML/CSS?
body: <p>Right now, I have my text directly over the background image; but I want to add a white box <em>over</em> the background image so I can have my text in the white box instead (to be more visually appealing). I tried adding this to my CSS sheet:</p>
  
  <pre><code>.white-box {
      position: absolute;
      background-color: #FFFFFF;
      color: black;
      width: 50px;
      height: 50px;
      padding: 20px;
  }
  </code></pre>
  
  <p>and this in the HTML page:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="white-box"&gt;
  Content
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This does not change my webpage and when I search this issue online, I just see different versions of what I already tried (shown above)
  <a href="https://startbootstrap.com/snippets/full-image-background/" rel="nofollow noreferrer">Here is what I am trying to achieve</a></p>
  
  <p>I appreciate any help! :)</p>