Well, it turns out that didn’t really work… I’m talking about this post.

Putting multiple background elements into a single style in a CSS file does not work (with most browsers). It works with browsers like Safari that support CSS3. CSS3 will have the ability to have multiple backgrounds in one style. Until more browsers support CSS3 you’ve gotta use multiple div’s or span’s to get multiple images.

It took me a little while to figure out a fool-proof way of getting this working with these on the particular wordpress theme I was designing.

So I was working on a theme for Wordpress (not the current one you see on my site, but a new one) and I needed to have three images set to the background for a class. The CSS editor I’m using (CSSEdit) didn’t have an option to do this. I searched around on the web and found several solutions. The one that I found to work the best was to just list them all like this:

background: url(images/post-top.gif) no-repeat 0 top, url(images/post-bottom.gif) no-repeat 0 bottom, url(images/post-span.gif) repeat-y;

This allowed me to have an image at the top, one to span the gap and another at the bottom. It’s no longer valid CSS but it works. I’m also not sure what all this works with, but I know it works with Safari (webkit) 3.0.