Multiple CSS Background Images

Tuesday 7 June, 2005 ( 8:33AM GMT)

One of the biggest annoyances with CSS is the inability to apply more than one background image to a box.

I'm currently working on a site that is in particular need of this. The only way to tackle it, at the moment, is to throw an ass-load of span or div tags in the mix (or to rely on tags that are slightly more meaningful, if they're appropriate, but that's not always possible).

Here's the situation. I have a list item that needs a particular little image in it. On top of that I need curved corners. Because I want the whole thing to expand and contract regardless of the size of the content within it, that means I need a separate background image for each corner.

So the HTML inevitably looks like this:

<li><span><span><span><span>Booby</span></span></span></span></li>

Urgh.

And the CSS looks something like this:

li {
	background: url(booby.jpg) center no-repeat;
}
li span {
	background: url(corner_top_right.gif) top right no-repeat;
	display: block;
}
	li span span {
	background: url(corner_bottom_right.gif) bottom right no-repeat;
}
	li span span span {
	background: url(corner_bottom_left.gif) bottom left  no-repeat;
}
	li span span span span {
	background: url(corner_top_left.gif) top left no-repeat;
	padding: 0.5em;
}

One image for a pretty little background, and one image for each of the corners.

CSS 3's got provision for multiple backgrounds, which would be wonderful. If only it was a practical option.

Comments

Comment 1

Nice article - there is only one missing...

So said bavel on Tuesday 7 June, 2005 at 8:38AM GMT.

Comment 2

Oh dear... it should have been "there is only one < /code > missing"...

So said bavel on Tuesday 7 June, 2005 at 8:39AM GMT.

Comment 3

Wow bavel. You're quick on the comments! I'm a bit lazy on checking the entries before I put them up. It's not the first time I've had a mini-panic "Oh god! An XML parsing error! I've missed something somewhere!".

All fixed now though. Cheers.

So said Patrick on Tuesday 7 June, 2005 at 8:44AM GMT.

Comment 4

Until CSS3 is usable, can't you use a Javascript function to insert all of those span's or div's?

a la nifty-corner? http://pro.html.it/esempio/nifty/

So said SteveC on Tuesday 7 June, 2005 at 9:31AM GMT.

Comment 5

Ah. Indeed a possibility. There are pros and cons though. The code would be neater, but if someone doesn't have JavaScript enabled, they won't get the presentational effect you're after.

So said Patrick on Tuesday 7 June, 2005 at 9:36AM GMT.

Comment 6

There are so much articles about the rounded corners. Are 4 different images for al the corners really necessary, I don't think so.
I think you already looked over here but there must be a usefull one between it: http://css-discuss.incutio.com/?page=RoundedCorners and mine of course: http://www.ischagast.nl/knutselhoek/ronde-hoeken/

So said Ischa Gast on Tuesday 7 June, 2005 at 9:46AM GMT.

Comment 7

Yes, four different images *are* necessary in situations like this. If the whole box can be different height and different widths to accommodate different sizes then there's no other way.

So said Patrick on Tuesday 7 June, 2005 at 9:57AM GMT.

Comment 8

Maybe I am too naïve, but since this multiple backround-image thing is mostly (if not only) used for corners, would it not be possible to create something else ?
I am thinking about a "corner" value looking like

#mybox {
corner-radius: 8px; }

This would be really helpful in future versions of CSS. Does anyone know of any potential drawbacks to such a thing ? I doubt I am the first person to wish for something like this.

So said Olivier on Tuesday 7 June, 2005 at 10:24AM GMT.

Comment 9

I think Mozilla has some sort of proprietary CSS for this. As for the CSS standards, I'm not sure. It would certainly be cool.

SVG might be an option...

So said Patrick on Tuesday 7 June, 2005 at 10:31AM GMT.

Comment 10

" SVG might be an option... "

What do you mean by SVG ?

(sorry if this is obvious to some)

So said Olivier on Tuesday 7 June, 2005 at 10:54AM GMT.

Comment 11

Ah. Sorry. "Scalable Vector Graphics". I'm no expert. See http://www.w3.org/TR/SVG/

So said Patrick on Tuesday 7 June, 2005 at 11:00AM GMT.

Comment 12

Quote:
Yes, four different images *are* necessary in situations like this. If the whole box can be different height and different widths to accommodate different sizes then there's no other way.

But in the example I posted I only need one image, the only thing is that the image must extreme heigh end width. I used Roger Johansson example (using 2 images instead of 4) over here and changed it something http://www.456bereastreet.com/lab/teaser/flexible/

Is that not the right example you are searching?

So said Ischa Gast on Tuesday 7 June, 2005 at 1:05PM GMT.

Comment 13

you could actually have the top left rounded corner as part of the main background image, then you only need 3 additional span's as opposed to 4... it's still not ideal, but it uses less meaningless tags...

So said keith - SuPeR K! on Tuesday 7 June, 2005 at 1:07PM GMT.

Comment 14

Ischa - Ah yes! Sorry, I didn't look very closely. Clever that. Of, course, you need a pretty big image, and you're still stuck with all of the HTML scaffolding.

Keith - that's assuming you don't need that box for something else, as in this example!

So said Patrick on Tuesday 7 June, 2005 at 1:09PM GMT.

Comment 15

-moz-border-radius is the property. SVG is not really an option here. It requires exactly the same.

So said Anne on Tuesday 7 June, 2005 at 1:29PM GMT.

Comment 16

When CSS3 does become viable, backgrounds for corners won't be necessary as borders (including curved corners) will get their own module:
http://www.w3.org/TR/css3-border

So said Richard Rutter on Tuesday 7 June, 2005 at 3:25PM GMT.

Comment 17

i got it down to 2 spans utilizing :before and :after pseudo classes and and expression hack to make it work in ie... a bit confusing code, but only 2 spans... tested in ie6/win, firefox, and opera...

// html
<li><span><span>Booby</span></span></li>

// css
li {
background: url(booby.jpg) center no-repeat;
display: block;
list-style: none;
margin: 0;
padding: 0;
}
li span {
background: url(corner_bottom_left.gif) bottom left no-repeat;
display: block;
}
li span span {
background: url(corner_bottom_right.gif) bottom right no-repeat;
padding: 0.5em;
}
li:before {
content: url(corner_top_left.gif);
display: block;
height: 15px;
width: 15px;
}
li span:before {
content: url(corner_top_right.gif);
display: block;
height: 15px;
padding-left: 100%;
margin: -15px 0 -15px -15px;
width: 15px;
}
li span span:before {
display: none;
}
* html li {
font-size: expression(this.runtimeStyle.fontSize="1em", this.innerHTML=''+this.innerHTML+'');
}
* html li span span {
padding: 0;
}
* html li span span span {
background: url(corner_top_left.gif) top left no-repeat;
}
* html li span span span span {
background: url(corner_top_right.gif) top right no-repeat;
padding: 0.5em;
}

So said keith - SuPeR K! on Tuesday 7 June, 2005 at 3:27PM GMT.

Comment 18

Regarding a CSS 'corner' property - yes I read about one about a year ago that was part of the proposal for CSS3 I think, I guess it would have made it too although I haven't checked - from what I can remember it allowed you to specify images for the four corners of an element using full or shorthand (a la border shorthand) code. You could also use only one corner image and CSS could handle the rotation of it for the other corners. I wish browser makers would pull their bloody finger out :p

So said Jon B on Tuesday 7 June, 2005 at 7:38PM GMT.

Comment 19

It should really be css3-background above. css3-border has been obsoleted by that document...

So said Anne on Tuesday 7 June, 2005 at 9:58PM GMT.

Comment 20

There seems to be an easy solution for this with a little help from PHP. The effect is a random background, I'm not sure if this is exactly what you would like to have. See http://sonspring.com/index.php?id=77 for more details. The technique elaborates upon a previous technique from Automatic Labs.

So said Joan M. Mas on Tuesday 7 June, 2005 at 10:46PM GMT.

Comment 21

I think Mozilla has some sort of proprietary CSS for this. As for the CSS standards, I'm not sure. It would certainly be cool.

Patrick, try this. A background image/color might leak and make them square again, well worth testing.

As for CSS3, this is the latest working draft for border-image, if only we had all that power ...

Meanwhile you could also try the oh so cool IE7 by dean. Here is the rounded corners demo.

So said Tom on Tuesday 7 June, 2005 at 11:42PM GMT.

Comment 22

ok, it seems I shouldnt have posted HTML. Here are the missing links to the post above

Moz: http://www.xulplanet.com/references/elemref/ref_StyleProperties.html

CSS3: http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-image

IE7: http://dean.edwards.name/IE7/
IE7, before and after test: http://dean.edwards.name/IE7/compatibility/content.html

So said Tom on Tuesday 7 June, 2005 at 11:45PM GMT.

Comment 23

"Don't use HTML. Use ' < ' to show the ' < ' character." ;)

So said Patrick on Tuesday 7 June, 2005 at 11:52PM GMT.

Comment 24

Patrick: Yeah, my technique (which has now been updated to support PNG images with alpha transparency and insert the extraneous elements with unobtrusive JavaScript: http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/) uses an image that is large when you count the pixels, but that doesn't necessarily mean that the file size will be too large. In fact, compared to downloading multiple smaller images the total bandwidth can actually be reduced. Plus you get fewer server requests. The extra HTML is still there though.

So said Roger Johansson on Monday 13 June, 2005 at 2:26PM GMT.

Comment 25

It really is an annoyance that you can't apply multiple background images to a block level element. I find this to be one of the most frustrating things about CSS. I can't wait until CSS3 is standard, but that's going to be a very long while, I fear

So said RMM on Tuesday 12 July, 2005 at 10:39PM GMT.

Comment 26

Crude way* to do it with a single image for all the corners ...

Building on Roger's iirc

http://www.elogicom.com/curvy.html or http://www.elogicom.com/c/sp/

* IE gets the colours wrong somewhere or other

So said Chris Neale on Wednesday 28 September, 2005 at 10:08AM GMT.

Comment 27

2nd link has two methods ... the variation of single image corners is for the same picture in both pages.

So said Chris Neale on Wednesday 28 September, 2005 at 10:11AM GMT.

Comment 28

tried and now working ;-) thanks

So said Conner on Sunday 2 October, 2005 at 2:04AM GMT.

Comment 29

The Mozilla way is just as unsupported as css3 will be.
Could do it like this.

This makes the corner radius more round if the box gets bigger.

This is the firefox way.
http://sitemeterreview.blogspot.com/

boo hoo, It's ugly in other browsers. :(

So said gaby de wilde on Saturday 8 October, 2005 at 10:32AM GMT.

Comment 30

Hm... Nice trick. I will try it. Interesting to check, how it looks in Opera browser.

So said Roman on Friday 18 November, 2005 at 9:54AM GMT.

Comment 31

...that's a really messy technique. Why not just:

[ul]
[li] [a href="#"] link 1 [/a] [/li]
[li] [a href="#"] link 2 [/a] [/li]
[li] [a href="#"] link 2 [/a] [/li]
[/ul]

and the CSS:

div { background: url(...) top left no-repeat; }
div ul { background: url(...) top right no-repeat; }
div ul li {background: url(...) bottom left no-repeat; }
div ul li a {background: url(...) bottom right no-repeat; }

much cleaner, much simpler; enjoy :)

So said Boris Cherny on Friday 25 November, 2005 at 6:25AM GMT.

Comment 32

Erm, cuz that wouldn't wurk. You'd get two corners on the list and two corners on each of the list items. The example is for four images on each and every one of the (non-link) list items.

So said Patrick on Friday 25 November, 2005 at 3:48PM GMT.

Comment 33

Unfortunately neither of this means I can call acceptable (personally to me, I mean). Overloading with unnecessary html tags destroy the logical structure of a html/html/xhtml document. Sometimes I sacrifice the graphics to make the tag structure of a document more logical.

So said Cowboy Marlboro on Friday 2 December, 2005 at 12:13PM GMT.

Multiple CSS Background Images

Tuesday 7 June, 2005 ( 8:33AM GMT)

Comments

See Also