title: svg background image position is always centered in internet explorer, despite background-position: left center;
body: <p>I'm using a SVG logo as a background image and I can't seem to get it to align correctly to the left in Internet Explorer <em>(edit: and Safari)</em>.</p>
  
  <p>The containers look like so:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div id="logo"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With the styles:</p>
  
  <pre><code>#header{
      width: 100%;
      max-width: 1200px; 
      height: 100%;}
  
  #logo{
      background: url(../images/ss_logo.svg);
      background-position: left center;
      width: 100%;
      height: 100%;
      float: left;}
  </code></pre>
  
  <p>You can see that the <code>&lt;div&gt;</code> should span 100% of its parent but display the logo to the left of the element. This works fine in Chrome and Safari, but the logo is always centered inside the <code>&lt;div id="logo"&gt;</code> in IE.</p>
  
  <p>Information seems to be really hard to find on this, has anyone else had the same problem?</p>
  
  <p>Here's a link to an <a href="http://magma.acidic.co.nz/sites/example" rel="noreferrer">example version of the problem</a>, the green box is the SVG.</p>