title: put a left margin on a background image
body: <p>I'm a CSS fresher. What I'm trying to do is I want to lay a background image in an HTML.
  My intent is I want to left margin the background image of 200px. My code is shared as below or you can check in this jsfiddle: <a href="http://jsfiddle.net/benmore/D5sNs/" rel="nofollow">http://jsfiddle.net/benmore/D5sNs/</a> </p>
  
  <p>
  
      
          </p>
  
  <pre><code>    &lt;style type="text/css"&gt;
  
          body{
              margin-left:200px;
              background:#5d9ab2 url(https://lh5.googleusercontent.com/-ZBLYo1oD6bM/UHox3oBICxI/AAAAAAAAAgo/yCg6TcxLeC4/s358/img_tree.png) no-repeat top left;
  
          }
  
          .container {
              text-align:center;  
              width: 100px;
          }   
  
  
      &lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body class="homepage"&gt;
      &lt;div class="container"&gt;
          test
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>My only problem is the background is staying closed to the left.
  What can I do to make it starts 200px from the left edge of the page?</p>