Skip to content
The biggest difference between CSS2 and CSS3 is that CSS3 is now split into different modules. Since each module makes its way through the W3C individually, there’s a wider range of browser support. Make sure you test your CSS3 pages in as many browsers and operating systems as possible to ensure compatibility.
Multiple Backgrounds
Background-image, background-position and background-repeat can now be used to specify multiple background images to be layered on top of one another. The first image is closest to the user, with the following image layered behind. If there is a background color, it’s painted below all the image layers.
#example1 {
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
background-color:red
}
***************************************
Prior ways to get multiple backgrounds required the following HTML…
<body bgcolor=”transparent” style=”background-image:url(/templates/name/images/background.jpg); background-repeat:repeat-x; background-position:top”>
then add to your css file
html {background-image:url(/templates/name/images/backgroundnew.jpg)}
***************************************
New Background Style Properties
Background-clip: how the background image should be clipped.
Background-origin: whether background should be placed in the padding box, the border-box, or the content box.
Background-size: determines the size of the background image. This allows stretching smaller images to fit a page.
Border Properties
Borders are still what we’re used to (solid, double, dashed, etc.). Now you can create rounded corners.
***************************************
div {
border: 2px solid;
border-radius: 25px;
}
***************************************
Border images are new because you can create an image of all four borders.
***************************************
div {
border-image:url(border.png) 30 30 30 30 round round;
}
***************************************
*Internet Explorer does not support the border-image property.
Written By: Izaak Hale – Graphic/Web Design
