Sep 29th, 2014 at 01:31 PM

Multiple Background images , size and position in CSS

Multiple background images are specified using a comma-separated list of values for the background-image property, with each value generating a separate ‘background layer’. The the first value in the list represents the top layer (closest to the user), with subsequent layers rendered behind successively. Image1: Environment Image2: Tree

<style>
#bg{
	background: url(tree.png) top left no-repeat, url(environment.jpg) top left no-repeat;
	
	background-color: #EEE;
	background-size:auto, auto;
}
</style>

A comma separated list is also used for the other background properties; background-repeat, background-attachment, background-position, background-clip, background-origin and background-size. Example:

background-position: center bottom, left top; 

The comma separated lists from the individual properties are then matched up, starting with the first value in each list. If excess values are specified for any of the individual properties they are ignored. For example; if four values are supplied for the background-position property, but only three values are supplied for the background-image property, the fourth value in the list would not be used. Similarly, if not enough values are supplied for any of the individual properties, the list of values for that particular property are repeated, from the first value, as many times as required. For example; if only two values are supplied for the background-position property, but three values are supplied for the background-image property, the list of values for background-position would be repeated, thus the third background image specified would have the same background-position value as the first. If a background color is specified, using the background-color property, this is applied as the final background layer, behind any background images.