background-size in shorthand background property CSS3

Question

I m trying to mix background-image and background-size properties in a shorthanded background property  Based on W3C documentation background-size should come after background-position property separated with an slash      W3C example    p   background  url  chess png   40    10em gray        round fixed border-box           is equivalent to   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       MDN says same thing  I also found this and this article about shorthand CSS3 background property explaining this    But this is not working  It also is not clear how to make a shorthand background property when background-size and background-position have two different values for background-position-x and background-position-y or same thing for background-size  It s not clear how the slash    takes place  This example is not working in my Chrome 15   Example I tried to make a shorthand is this CSS 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        A cleaner example  This is working  JSFiddle    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          This is not working  jsfiddle   body      background url http   www google com intl en com images srpr logo3w png  200px 100px 600px 400px no-repeat      This is not working too jsfiddle   body      background url http   www google com intl en com images srpr logo3w png  200px 400px 100px 600px no-repeat

User · Answer

try out like this  body      background   fff url   --MIZO-PRO--    no-repeat center 15px top 15px 100px              100px is the background size

User · Answer

You will have to use vendor prefixes to support different browsers and therefore can t use it in shorthand    body                background  url images bg jpg  no-repeat center center fixed               -webkit-background-size  cover              -moz-background-size  cover              -o-background-size  cover              background-size  cover

User · Answer

Your jsfiddle uses background-image instead of background It seems to be a case of  not supported by this browser yet      This works in Opera   http   jsfiddle net ZNsbU 5  But it doesn t work in FF5 nor IE8   yay for outdated browsers  D    Code    body     background url http   www google com intl en com images srpr logo3w png  400px 200px   600px 400px no-repeat      You could do it like this     body       background url http   www google com intl en com images srpr logo3w png  400px 400px no-repeat      background-size 20px 20px     Which works in FF5 and Opera but not in IE8

User · Answer

You can do as     body          background url  equote png   url  equote png            background-size 400px 100px 50px 50px

User · Answer

Just a note for reference  I was trying to do shorthand like so   background  url     images sprite png   -312px -234px   355px auto no-repeat    but iPhone Safari browsers weren t showing the image properly with a fixed position element  I didn t check with a non-fixed  because I m lazy  I had to switch the css to what s below  being careful to put background-size after the background property  If you do them in reverse  the background reverts the background-size to the original size of the image  So generally I would avoid using the shorthand to set background-size   background  url     images sprite png   -312px -234px no-repeat  background-size  355px auto

[css] background-size in shorthand background property (CSS3)

Examples related to css