1 The first background image. This is the image that is closest to the viewer. Every background image can have the general values of the background property, where the most important are background-position and background-repeat. By default they are positioned top left and get repeated at the x- and y-axis.
2 The second background image, layered under the first one.
3 The third background image which is the lowermost.
4 The general background color of the element. Can be only set last, no comma preceded.
1 The first background image is alligned horizontally right and vertically bottom. It is assumed that background-repeat is set to no-repeat to prevent it from repeating at the whole background (like all the other images in this stack).
2 The second background image, centered horizontally and vertically.
3 The third background image – by default alligned top left.
1 By default the background of a box (element) is drawn beneath the border, that is the border covers it (= border-box, default value). To change this behaviour it’s possible to use the values padding-box and content-box (Firefox 3.6 uses border and padding instead, content is not supported).
1 If a border is set the background starts directly within it, everything outside gets clipped. Same as the default value (border-box) when no border is set.
1 If a padding is set the background gets applied within it, everything outside is clipped. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.
1 When background images are applied they directly start at the outer dimensions of the containing element (= padding-box, default value). In the presence of a border they start directly within it. Can also be content-box or border-box (Firefox 3.6 uses padding, content and border).
1 If a padding is set the background image gets applied within it. Same as padding-box when no padding is set, same as padding-box and border-box when no padding and no border are set.
1 The horizontal size of the background image, in this case 50% of the width of the element (not of the original image size). Can also be set in absolute (px) or relative (em) units, can be auto (original size, default), cover or contain. In combination with multiple background images the different values are separated by commas.
2Optional. The vertical size of the background image, in this case 25% of the height of containing element. If not set it is assumed to be auto.
1 The background size is set to half the width of the element and the full height (alligned bottom left through background-position).
2 Background image is set to both 33% of the width and the height of the element (image is alligned bottom right).
3 The original background size is preserved. Important when multiple backgrounds are set and resized and one should keep the original size (not depicted).
4 Image size set to 100px horizontally and vertically (not depicted).
x The live view can be examined using an element inspector like Firefox’s Firebug. Many browsers already have such an inspector build in. In each case right click on the example and then select “Inspect element”. Now an area in your browser opens where you see the HTML code of the example on the left side and the CSS on the right side for further investigation.
Hey Brent! Drop me a line at the contact form if you want to discuss this issue!
In short: There is no easy way for IE < 9 to achieve multiple backgrounds and the other properties on this page. But especially multiple bgs are possible although a little bit more complicated.
Martijn
What’s wrong with Opera and background-position? You claim O doesn;t apply correctly, but you never explain how/why/when.
http://www.css3files.com Christian Krammer
I am very sorry that I haven’t further explained this issue but space is limited.
As soon as multiple backgrounds are set Opera seems to assume that there is a right padding that isn’t really there. So for example if an image is set to “center” it has an offset to the left instead of being absolutely centered.
http://www.webdesign-ieftin.com designarti
So, for now, to use these properties on my website, I should always keep in mind to add extra code for IE < 9. And from what I have heard, Microsoft does not intend to implement CSS3 in older versions than 9.
My question is…
Should I use CSS3 or not?
Kind of time killer that extra code.
http://www.css3files.com Christian Krammer
You definitely should! The extra work really pays of because it makes your site future proof – and prettier, faster, … Currently all major browser support a great range of CSS3 properties, and the people with browsers that don’t (like IE < 9) won’t miss it.
Apart form that you show that you are a forward thinking, modern web designer if you use CSS3. It is the future, respectively the presence. Refuse yourself to CSS3 and you will be refused yourself very soon.
Pallavi Kuthe
Excellent site and very helpful!!!!!!Keep up the good work.
Some love lasts a lifetime. True love lasts forever. ,
A kiss makes the heart young again and wipes out the years. Rupert Brooke,
This is my commandment, that ye love one another Jesus
Love is the poetry of the senses. Honore de Balzac
A loving heart is the beginning of all knowledge. Thomas Carlyle
Pingback: CSS Typographic Reset: Step By Step
Pingback: Creating a Fixed Menu to the Left or Right of Browser