title: background-size in shorthand background property (CSS3)
body: <p>I'm trying to mix <code>background-image</code> and <code>background-size</code> properties in a shorthanded <code>background</code> property. Based on <a href="http://www.w3.org/TR/css3-background/#background-size"><strong>W3C documentation</strong></a> <code>background-size</code> should come after <code>background-position</code> property separated with an slash(<code>/</code>).</p>
  
  <p>W3C example:</p>
  
  <blockquote>
  <pre><code>p { background: url("chess.png") 40% / 10em gray
         round fixed border-box; } 
  </code></pre>
    
    <p>is equivalent to:</p>
  
  <pre><code>p {
      background-color: gray;
      background-position: 40% 50%;
      background-size: 10em 10em;
      background-repeat: round round;
      background-clip: border-box;
      background-origin: border-box;
      background-attachment: fixed;
      background-image: url(chess.png) }
  </code></pre>
  </blockquote>
  
  <p><a href="https://developer.mozilla.org/en/CSS/background-size"><strong>MDN</strong></a> says same thing. I also found <a href="http://www.css3.info/preview/multiple-backgrounds/">this</a> and <a href="http://www.standardista.com/css3/css3-background-properties/">this</a> article about shorthand CSS3 background property explaining this. </p>
  
  <p>But this is not working! It also is not clear how to make a shorthand <code>background</code> property when <code>background-size</code> and <code>background-position</code> have two different values for <code>background-position-x</code> and <code>background-position-y</code> or same thing for <code>background-size</code>. It's not clear how the slash(<code>/</code>) takes place? <a href="http://jsfiddle.net/G67Ej/">This example</a> is not working in my Chrome 15.</p>
  
  <p>Example I tried to make a shorthand is this CSS code:</p>
  
  <pre><code>div {  
      background: url(http://www.placedog.com/125/125) 
          0 0 /  150px 100px 
          repeat no-repeat 
          fixed border-box padding-box blue;      
      height: 300px;
      width:360px;    
      border: 10px dashed magenta;  
  }
  </code></pre>
  
  <h1>A cleaner example</h1>
  
  <p><em>This is working</em> (<a href="http://jsfiddle.net/ZNsbU/">JSFiddle</a>)</p>
  
  <pre><code> body{
          background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
          background-position:200px 100px;
          background-size:600px 400px;
          background-repeat:no-repeat;
      }
  </code></pre>
  
  <p><em>This is not working</em> (<a href="http://jsfiddle.net/ZNsbU/7/">jsfiddle</a>)</p>
  
  <pre><code>body{
      background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
  }
  </code></pre>
  
  <p><em>This is not working too</em>(<a href="http://jsfiddle.net/ZNsbU/8/">jsfiddle</a>)</p>
  
  <pre><code>body{
      background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
  }
  </code></pre>