title: How to make the background image of the pseudo element stretch to fit the width?
body: <p>I am trying to overlay some text on an image, and also make the background image 0.2 transparent. now my question is: How to make the background image of the pseudo element stretch to fit the width or crop the image to fit the screen（without distort the image）?  Edit the code on codepen <a href="http://codepen.io/anon/pen/gvEdL" rel="nofollow">here</a>.</p>
  
  <p><strong>css:</strong></p>
  
  <pre><code>#main:after {
      content : "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg/944px-Selwyn_College_Old_Court%2C_Cambridge%2C_UK_-_Diliff.jpg); 
      width: 100%;
      height: 100%;
      opacity : 0.2;
      z-index: -1;
  }
  </code></pre>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
    Text on top, no big deal, no big deal. Just a little text and stuff. That's all.
  &lt;/div&gt;
  </code></pre>