background shorthand order in CSS3

Question

There are questions in the HTML5 microsoft certification about the correct order of selectors in the CSS3 background shorthand... but I searched, searched... but not found somewhere a valid reference to what is the real order precedence in that shorthand (if any)...

the W3C recommendation on this matter is not very explicit on this subject (at least, is not evident to find that information)....

is ancient CSS2 "see, I rap" (CIRAP) acronim was more or less catchy... but even there W3C didn't clearly exprimed a order?!...

What is the meaning for this kind of questions in certifs, if no one knows the standard? What is, finally, the correct order to take in CSS3?

their examples are confusing... by ex, the following makes believe that the order is CIRAPCOS

Another example shows equivalence:

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }

then the specification mentions:

Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of ‘background-image’, ‘background-position’, ‘background-size’, ‘background-repeat’, ‘background-origin’, ‘background-clip’ and ‘background-attachment’ to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally ‘background-color’ is set to the specified color, if any, else set to its initial value.

so, this is how we obtain IPSROClACo

Answer 1

Is is explicitely written :

Value:

[ <bg-layer> , ]* <final-bg-layer>

Where:

<bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
<final-bg-layer> = 
       <bg-image> 
    || <position> [ / <bg-size> ]? 
    || <repeat-style> 
    || <attachment> 
    || <box>{1,2} 
    || <'background-color'>

An example, which give us IPSRABC :

background: 
    url("content.jpg") 
    left top / 200px 70px
    no-repeat
    scroll
    content-box content-box
    white;
/* or */
background-image: url("content.jpg") ;
background-position: left top;
background-size: 200px 70px;
background-repeat: no-repeat;
background-attachment: scroll;
background-clip: content-box;
background-origin: content-box;
background-color: white;

If you want a mnemonic for it, here is one (and ya, I'm fully opened to any better sentence !) :

I pee a sir, Abby ! See ? (IPSRABC)

Note : you can put background-repeat before background-position / background-size, which give you IRPSABC.

Answer 2

Q: What are the correct order of selectors values in the CSS3 background shorthand?

A: any order

---

MSDN documentation for background states...

Up to five of the following space-delimited values, in any order:

• color - Any of the range of color values available to the background-color property.
• image - Any of the range of image values available to the background-image property.
• repeat - Any of the range of repeat values available to the background-repeat property.
• attachment - Any of the range of attachment values available to the background-attachment property.
• position - Any of the range of position values available to the background-position property.

The MSDN documentation lacks the updated CSS3 shorthand properties, but the answer remains...any order

---

Digging further, even MDN documentation for background (which does include CSS3 syntax) states...

One or more of the following, in any order:

<'background-attachment'> See background-attachment

<'background-clip'> See background-clip

<'background-color'> See background-color

<'background-image'> See background-image

<'background-origin'> See background-origin

<'background-position'> See background-position

<'background-repeat'> See background-repeat

<'background-size'> See background-size. This property must be specified after background-position, separated with the '/' character.

---

A basic example of this: jsfiddle example

.box1 {
    background-image: url(//placehold.it/100/f00);
    background-position: center center;
    background-color: red;
}
.box2 {
    background: 
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */
        red /* background-color */;
}
.box3 {
    background: 
        center center /* background-position */
        url(//placehold.it/100/f00) /* background-image */
        red /* background-color */;
}
.box4 {
    background: 
        red /* background-color */
        url(//placehold.it/100/f00) /* background-image */
        center center /* background-position */;
}