Cannot use SVG as CSS background in Webkit
===

I've been trying to use a SVG file as background for a header on my site, but it doesn't seem to show up in Webkit browsers (I tried Chrome and Safari; on mac). Firefox seems to display it correctly. 

Here's my CSS: 

    header {
      overflow: auto;
      width: 100%;
      height: 80px;
      background: url(../img/navbg.svg) no-repeat;
      background-size: 100%;
      -o-background-size: 100%;
      -webkit-background-size: 100%;
      -moz-background-size: 100%;
    
      margin: 0 0 20px 0;
      padding: 0;
    
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    
      box-shadow: inset 0 0 1px #fff, 
        inset 0 1px 0 rgba(255,255,255,.3),
        0 1px 2px rgba(0,0,0,.5);
    }

Any ideas on how to fix this? 

Thanks! 
Marcel