title: Can CSS be used to mask background images?
body: <p>This is what I have presently:</p>
  
  <p><img src="https://i.stack.imgur.com/8UhfX.jpg" alt="Image of current code"></p>
  
  <p>Here's my code so far:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .main
      {
          background:url(bg.jpg);
          height:250px;
          }
      .ban
      {
          background-color:#333;
          height:150px;
      }
      .mask
      {
          width:75px;
          height:75px;
          float:left; 
          border:#fff solid 1px;
  
          margin:20px;
      }
  &lt;/style&gt;
  
  &lt;div class="main"&gt;
      &lt;div class="ban"&gt;
           &lt;div class="mask"&gt;&lt;/div&gt; 
           &lt;div class="mask"&gt;&lt;/div&gt;
           &lt;div class="mask"&gt;&lt;/div&gt;
           &lt;div class="mask"&gt;&lt;/div&gt;
           &lt;div class="mask"&gt;&lt;/div&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's what I am aiming for:</p>
  
  <p><img src="https://i.stack.imgur.com/qX0E7.jpg" alt="enter image description here"></p>
  
  <p>I am looking to create a mask using CSS - what do I need for this?</p>