title: HTML/CSS Background image doesn't scale in Safari
body: <p>I'm having a problem with background image scaling in Safari (specifically on the iPhone). </p>
  
  <p>Here's how it looks on iPhone:</p>
  
  <p><img src="https://s24.postimg.org/danr0pbxx/bug.jpg" alt="screenshot"></p>
  
  <p>Here's how it should look (at least):</p>
  
  <p><img src="https://s24.postimg.org/mwhbh033p/norm.png" alt="screenshot"></p>
  
  <p>Here's the CSS code:</p>
  
  <pre class="lang-css prettyprint-override"><code>#home {
  background-color: rgba(0,0,0, .5);
  background-image: url(../img/header-bg.jpg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  text-align: center;}
  
  img {
  vertical-align: middle;
  max-width: 100%;
  height: auto; }
  </code></pre>
  
  <p>I forgot to mention that "home" is the "id" of a <code>&lt;section&gt;</code> tag. The idea is to use an image background for this "#home" <code>&lt;section&gt;</code>.</p>