The comma-separated values of the CSS background-image property have to match to the comma-separated values of the other CSS background properties (such as background-position, background-repeat), starting with the first value in each list.

If one of the CSS properties has more amount of values than background-image, then all spare values in the end of the list will be ignored.

At the same time, if a CSS property has less amount of values than background-image, then all values of the current property will be repeated starting from the first value, as many times as necessary.

In the example above the background-repeat has only one value which is applied for both images in the background-image.

As it was mentioned at the beginning of the article, background-color is the only CSS property which doesn't accept multiple values. Color layer is always positioned below the image layers. So, this CSS property always has only one value. If there is a need to specify the color using shorthand CSS property - background, then it must be placed in the last instance of the comma-separated list.

Such an example can also be achieved without multiple backgrounds using an old fashion way. That's how developers were doing this before the era of CSS3.

So, old browsers don't support multiple backgrounds for one element. They support only one background image for one element. This means if you have five background images then you have to use five elements in HTML; one background image per element. This increases HTML code which makes it more complex without any apparent reasons.

To write the same example above using the old way, four new elements must be added to HTML. Additionally each new element should also have class or id attribute to define selector with corresponding styles.