Here’s a quick little tip I picked up this morning. With CSS3 you can now have multiple background attributes assigned to the same element, meaning you no longer need to overlay multiple div’s!
How do you do it?
Simple. CSS3 takes comma separated values for each background attribute part. For example;
.MultipleBackgroundDiv {
background-image:url(‘img/topBackground.png’),url(‘img/bottomBackground.png’);
background-repeat:no-repeat, no-repeat;
background-position: top left, bottom right;
}
The above code will load two backgrounds into the ‘MultipleBackgroundDiv’, repeating neither of them. The first background image (‘topBackground’) will be positioned at the top left, whilst the second image (‘bottomBackground’) will be positioned in the bottom right.
