title: Fullscreen responsive background image in CSS
body: <p>I want to make <a href="http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png" rel="nofollow">this image</a> as the background image of my webpage. However , the problem is that the image doesn't cover the whole of the page, as you may see in <a href="http://plnkr.co/edit/LmHIak79oPtEaZCAUZbx?p=preview" rel="nofollow">this preview</a> , and it gets repeated at the rightmost end . Is there a way so that the image covers the whole page (be it any way , stretching , re-sizing , or something new).</p>
  
  <p><strong>My Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;Angry Birds Star Wars&lt;/title&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;style&gt;
              body {
                  background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
              }
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;&lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks.</p>
  
  <h2>UPDATE:</h2>
  
  <p>I have now finally come to believe that there is almost nothing that can get that image to fit exactly to my PC screen. I am now ok , and am moving further , please don't post answers now.</p>