The following CSS
background properties can be written in a shorthand syntax:
background: #ccc /* background-color */ url('foo.png') /* background-image */ top left / 100% auto /* background-position / background-size */ no-repeat /* background-repeat */ fixed /* background-attachment */ padding-box /* background-origin */ content-box /* background-clip */ ;
Generally, the order in which the properties appear does not matter. Consider, for example, the following two examples, which are both equivalent:
background: no-repeat url('foo.png') #ccc;
background: #ccc url('foo.png') no-repeat;
There are, however, some exceptions to the rule that you should be aware of, to avoid surprises.
You may use any combination of the
background properties, for example:
/* background-color only */ background: #ccc; /* background-image and background-repeat only */ background: url('footer.png') no-repeat; /* ... */
background property you may specify more than one
background layer separated by a comma. For example:
background: url('layer-1.png') no-repeat, #ccc url('layer-2.png') no-repeat, /* ... */ ;
One important thing to note is that the
background-color property only applies to the final
background layer, for example:
background: url('layer-1.png') no-repeat, url('layer-2.png') repeat-x, #ccc url('layer-3.png') repeat-x, /* ... */ ;
background properties, however, can be specified/applied (zero or one time) on each layer.
Hope you found this post useful. It was published . Please show your love and support by sharing this post.