Sequence of CSS element - css

Question

There are two CSS statements but different sequence order in declaration.
.wrap {
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
}
and
.wrap {
background: url('/images/bg.jpg');
background-size: cover;
max-width: 100%;
background-color: rgba(255, 255, 255, 0.4);
min-height:600px;
}
The difference is just the sequence order of the element between background: url() and background-color, if background: url() is declared after the background-color and there is no image can be loaded, then the background-color cannot become effective. It seems the background: url() override the background-color.
Demo can be found from http://jsfiddle.net/yckelvin/ctgc8xzL/
Is there any definition to the CSS syntax about the element sequence order in declaration? I read the w3schools.com but no such information.

Answer 1

When you use the shortcut background property, any unspecified background properties such as background-color are set to the initial default value.
So if the background property is declared after background-color without specifying
a color, then the background color takes on the initial value of transparent.
This is part of the CSS specification:
http://www.w3.org/TR/css3-background/#the-background

Answer 2

CSS is short for Cascading Style Sheets (emphasis mine). This means that selectors and properties listed later will override selectors/properties that came before.
Think of it as if someone tells you "go left, and then right. Wait; nevermind. Go right, and then right again". You would follow the second set of instructions, rather than the first. CSS works the same way.
So with the following CSS:
div {
color: green;
color: red;
}
The color: red; will be applied, whereas color: green; will be overridden.
Usually, there is no requirement to order certain properties certain ways; you can put width before height or vice versa, and you could put background: url() after background-color. No big deal; the CSS will be applied the same way.
On a slightly different note, there are some selectors that require a particular ordering. That is, a:link, a:visited, a:hover, a:active should be placed in that order to avoid specificity problems.

Answer 3

background is just a short-hand for a multiple of attributes
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
What you want is to set
background-image: url() seperately. or just use the combined one for all your values.

Answer 4

The cascading rules of CSS specify that other things being equal, the latter of two conflicting declarations wins. And here other things are equal, since the declarations for background and background-color appear within the same rule, so they have the same status (same source, same importance, same specificity).
The declarations are in conflict, since they both set the background color. The reason as that the background shorthand property always sets all background properties. When the background color is not specified when using the shorthand, it is set to the initial value, transparent (which, when it takes effect, means that the background of the enclosing element shines through).
Thus, although the first version of the code is valid, too, it is pointless in the sense that the background-color declaration cannot have any effect. The second version sets first all background properties and then overrides the background color with another declaration. This is a possible coding style, though some people may say it is not good style.
The issue does not arise if you set background image using the specific background-image property instead of the shorthand. (A background image may cause that the background color is not seen, if the image fills the entire element area, but that’s a different issue.)