Working with CSS3 backgrounds
With CSS3 you can stack different backgrounds in different layers. You can accomplish this simply by separating the different background links with commas “,”. Background layers will work with Chrome, Safari and Firefox, in addition to IE9.
background: url(‘../../Pictures/Milhouse.gif’) no-repeat , <–First background
url(‘../../Pictures/Milhouse1.jpg’) top right no-repeat; <– Second background layer
The CSS3 property lets you adjust the background size straight from the code without having to readjust in an image edidor like photoshop.
The code is simple:
Background-size: width, height
For example if a background size of 2400 x 1800 px is too big we can cut this in half by writing:
background-size: 1200px, 900px;
Background-origin is where the background image actually starts and background-clip is where the background gets cut off.
There are 3 attributes for the background origin/clip property, they are: border-box, content-box, padding-box
Background-origin: border-box, content-box, padding-box
Background-clip: border-box, content-box, padding-box
Depending on which of the three you choose, that is where your background image will begin.
The above code means that the background will start immediately from the border and be clipped or cut off wear the content box starts.