title: CSS HTML place a white square on an image
body: <p>I have a div that the entire background of it is an image.  In the middle of an image I want to have a white box that has some text in it.  I tried with relative position but that stretched out the parent.  </p>
  
  <p>Here is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="desk-linkedIn-image" style="background: url('img/linkedin/at_desk_linkdenIn_optimization.jpg');width: 100%;"&gt;
    &lt;div style="background-color: #FFFFFF; width: 475px; height: 46%;padding-left: 2%;"&gt;
  
      &lt;p style="font-size: 20px;"&gt; Text Text Text&lt;/p&gt;
      &lt;p style="font-size: 20px;"&gt; Text Text Text&lt;/p&gt;
      &lt;p style="font-size: 20px;"&gt;Text Text Text&lt;/p&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>