title: CSS - Background images not displaying properly on mobile browsers
body: <p>The background images of a website I'm working on (<a href="http://tinyurl.com/ax68brt" rel="nofollow">http://tinyurl.com/ax68brt</a>) are not displaying properly on mobile phone browsers. The problem occurs with the outheader, outbeurzen and outtwitter divs. The header background is not displayed in 100% width, and the backgrounds for the outbeurzen/outtwitter divs are not properly displayed either.</p>
  
  <p>What is going wrong here?</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="outheader"&gt;&lt;/div&gt;
  &lt;div id="outintro"&gt;&lt;/div&gt;
  &lt;div id="outbeurzen"&gt;&lt;/div&gt;
  &lt;div id="outfoto"&gt;&lt;/div&gt;
  &lt;div id="outtwitter"&gt;&lt;/div&gt;
  &lt;div id="outfooter"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>#outheader {
  background-image: url(images/achtergrond/header.jpg);
  float: left;
  height: 660px;
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 0px;
  margin: 0px;
  padding: 0px;}
  
      #outintro {
  background-image: url(images/achtergrond/body.jpg);
  float: left;
  height: auto;
  width: 100%;
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-position: 50%;
  padding-top: 60px;
  padding-bottom: 60px;
      }
  
      #outbeurzen {
  background-image: url(images/achtergrond/beurzen.jpg);
  float: left;
  height: 315px;
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% -300px;
      }
  
      #outfoto {
  background-image: url(images/achtergrond/body.jpg);
  float: left;
  height: auto;
  width: 100%;
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-position: 50%;
  margin-bottom: 70px;
  margin-top: 70px;
      }
  
      #outtwitter {
  background-image: url(images/achtergrond/twitter.jpg);
  float: left;
  height: 315px;
  width: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50%;
  font-family: 'Roboto Condensed', sans-serif;
      }
  
      #outfooter {
  background-image: url(images/achtergrond/body.jpg);
  float: left;
  height: 240px;
  width: 100%;
  background-attachment: fixed;
  background-repeat: repeat-y;
  background-position: 50%;
      }
  </code></pre>