What Should be the Order of Values in CSS background Shorthand Property?

Generally, the order in which the property values appear in the CSS background shorthand property does not matter. For example, the following are equivalent:

background: no-repeat url('foo.png') #ccc;

background: #ccc url('foo.png') no-repeat;

However, there are three exceptions to the rule:

1. background-size Must be Added After background-position;
2. background-origin and background-clip Must be Declared in Correct Order;
3. background-position Values Must Follow Correct Order.

background-size Must be Added After background-position

The background-size property may only be added after background-position property (separated by /). For example:

background:
    url('foo.png')        /* background-image */
    top left / 100% auto  /* background-position / background-size */
    /* ... */
;

background-origin and background-clip Must be Declared in Correct Order

A background property can have zero, one or two *-box values (i.e. one of, border-box, padding-box and content-box). These values determine how the values are assigned to the background-origin and background-clip properties. There are essentially two rules:

1. If one *-box value is present then both, background-origin and background-clip, are set to that value;
2. If two *-box values are present, then the first sets background-origin and the second sets background-clip.

These rules exist because background-origin and background-clip can have the same set of three values — i.e. one of, border-box, padding-box or content-box, making it hard to distinguish between the two properties in the shorthand syntax.

According to the first rule, the following example would set both, background-origin and background-clip, to the value padding-box:

background:
    url('bg.png')  /* background-image */
    no-repeat      /* background-repeat */
    padding-box    /* background-origin, background-clip */
;

According to the second rule, the following example would set a different value for both, background-origin and background-clip:

background:
    url('bg.png')  /* background-image */
    no-repeat      /* background-repeat */
    padding-box    /* background-origin */
    content-box    /* background-clip */
;

background-position Values Must Follow Correct Order

A background shorthand property can have zero to four background-position values. They must adhere to the following rules:

• background-position values (of any type — keyword or numeric) must appear next to each other;
• If only one numeric value exists on its own, then it sets background-position-x (and background-position-y defaults to 50%);
• If the first of two values is numeric, then the numeric value applies to background-position-x;
• If the second of two values is numeric, then the numeric value applies to background-position-y;
• If three values are present, then numeric value acts as an offset for the keyword value that precedes it. In this instance combining one keyword value with two numeric values is not valid;
• If four values are present, then third and fourth values are numeric which act as an offset for the keyword values that precede them.

For example:

/* background-position-x: 15px */
/* background-position-y: 50% */
background: url('foo.png') 15px;

/* background-position-x: 15px */
/* background-position-y: top */
background: url('foo.png') 15px top;

/* background-position-x: left */
/* background-position-y: 30px */
background: url('foo.png') left 30px;

/* background-position-x: 15px */
/* background-position-y: 30px */
background: url('foo.png') 15px 30px;

/* background-position-x: left 15px */
/* background-position-y: top */
background: url('foo.png') left 15px top;

/* background-position-x: left */
/* background-position-y: top 30px */
background: url('foo.png') left top 30px;

/* background-position-x: left 15px */
/* background-position-y: top 30px */
background: url('foo.png') left 15px top 30px;