I just learned that you can add more than 1 background image to an element through CSS. It appeared in one of my student’s CSS exercises and I was floored! Could multiple background images be a solution to create the infamous rounded corners? Simple answer: YES.
- I created the normal 9 slices (minus the middle color) in photoshop: topleft, top, topright, left, right, bottomleft, bottom, bottomright.
- I added the CSS background property to my selected element in CSS. 8 images with centers repeating and 1 background color. In this case I put it on a div:
background:
url("topleft.gif") no-repeat top left, url("topright.gif") no-repeat top right,
url("bottomleft.gif") no-repeat bottom left,
url("bottomright.gif") no-repeat bottom right, url("top.gif") repeat-x top left,
url("bottom.gif") repeat-x bottom left,
url("left.gif") repeat-y top left,
url("right.gif") repeat-y top right,
#b60609;
Notice that each background property set is separated by a comma. Also, I had to call the corner images first so that they aren’t hidden by the repeating center ones. You could also do this with a sprite file, calling in a single image several times using fancier positioning, but I got lazy.
You can view this in action, or download my test files (.zip 8k).