title: Image background (fixed, center) issues on mobile devices
body: <p>I have an image background on my website:</p>
  
  <pre><code>body {
      background-image:url('tlo.jpg');
      background-color:#000000;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position: center center;
      background-size: auto auto;
      (...)
  }
  </code></pre>
  
  <p>There are not any problems on PC, but mobile devices with vertical screen renders background not exactly in the same way: it seems that mobile browsers fit the background horizontally, so vertically it covers only small piece of website. I've tried to fix it by using different values for <code>background-size</code> attribute, but it didn't work.</p>
  
  <p>My CSS + HTML:</p>
  
  <pre><code>body {
      background-image:url('tlo.jpg');
      background-color:#000000;
      background-repeat:no-repeat;
      background-attachment:fixed;
      background-position: center center;
      background-size: auto auto;
      margin-left: 0;
      margin-right: 0;
  }
  
  #overall {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
      height: 100%;
  }
  
  #logo {
      position:absolute;
      left:0;
      top:0;
  }
  
  #content {
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      width: 100%;
      height: 300px;
      background-color:rgba(255,255,255,0.5);
      text-align: center;
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="overall"&gt;
          &lt;div id="logo"&gt;&lt;img src="logo.png" width="654" height="150"&gt;&lt;/div&gt;
          &lt;div id="content"&gt;&lt;a href="#"&gt;&lt;img src="cont.png" border="0"&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>