title: Image Not resizing properly on different devices
body: <p>I am trying to make a mobile page responsive. But keep running into issues where the page don't show up properly on different devices.</p>
  
  <p>Here is my HTML code :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;head&gt;
  &lt;meta name="viewport" content="width=device-width/" &gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link href="css/book.css" rel="stylesheet" /&gt;
  &lt;style type="text/css"&gt;
      #page {
          background-image: url("images/image-000.jpg");
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="page"&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and here is my CSS code:</p>
  
  <pre><code>body {
      background-color: #333;
      padding: 0px;
      margin:0px;
      font-family: Helvetica;
      font-size: 14px;
      line-height: 1.2;
  }
  
  #page {
      height: 1024px;
      width: 768px;
      background-color: #FFF;
      position: relative;
  /*  background-image: url("images/img001.png"); - Set in the page header */
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0px;
  }
  </code></pre>