Multiple Backgrounds
Posted by Dave Hyatt on Tuesday, August 2nd, 2005 at 4:32 pmYou may or may not have seen this blog post from the CSS WG asking for feedback on backgrounds and borders in CSS3. One of the features in the CSS3 draft is the ability to specify multiple backgrounds on a single element, thus allowing for effects like Sliding Doors to be achieved with only one element instead of two. Since people are snooping around in the WebCore code, I might as well reveal this now rather than later. 
Safari 1.3 and 2.0 support multiple backgrounds as specified in CSS3.
Surprise!
I encourage web designers to try out the support, play with it, see if the syntax makes sense, and give the working group your feedback. This feature should be considered experimental in Safari, and we will update our implementation as necessary to match the CSS3 draft as it changes.
August 2nd, 2005 at 7:04 pm
Holy crap this rules… ok, so I made a quick little page to try this out and I thought I’d share…
http://petertoh.com/images/multi-bk.html (it’s not me in the images)
The best part is grabbing the corner and re-sizing the window all around checking out the layering. The layering works in the the order the images are in the CSS. Check out the source, the CSS is in the head.
I lifted the syntax from the CSS3 working draft pages here:
http://www.w3.org/TR/2005/WD-css3-background-20050216/#layering
August 2nd, 2005 at 7:09 pm
I’m trying to play around with the background property as I’m reading the CSS Backgrounds and Modules Working Draft. I’m not getting things to work out in the latest released version of Safari, or with the current WebCore, in Tiger. When someone has a working test page, I’d really like to see it in action. Thanks.
-Chase
August 2nd, 2005 at 7:09 pm
And there’s my answer… Thanks!
-Chase
August 2nd, 2005 at 7:28 pm
No doubt, rendezvouscp…
I checked my page in all the browsers I could get my hands on, and Shiira 1.1 renders this correctly. I know it’s built on Webkit, but so is Omniweb, and it only renders the first layer. I guess Shiira actually uses the same framework as Safari does, and Omniweb doesn’t?
August 2nd, 2005 at 7:38 pm
[...] Safari 1.3 and 2.0 support multiple backgrounds as specified in CSS3..
Que envidia.
Safari 1.3 and 2.0 support multiple backgrounds as specified in CSS3..
Que envidia. [...]
August 2nd, 2005 at 7:47 pm
Kind of cool but if you scroll down the page you will find the item that I have been wishing for for about 5 years now ‘box-shadow’. I did a quick test but it hasn’t been implemented in Safari yet. Looks like there is some really good stuff in CSS3 so far, ‘border-radius’ and ‘border-image’ are other ones I have been wishing for .
August 2nd, 2005 at 9:07 pm
“I guess Shiira actually uses the same framework as Safari does, and Omniweb doesn’t?”
OmniWeb doesn’t use WebKit at all. The OMNI Group infrequently forks off WebCore and JavaScriptCore, then changes them to fit their needs, then integrates them to the next major OmniWeb upgrade. IIRC, OmniWeb 5.0 used versions forked off the Safari 1.1 backend, whereas OmniWeb 5.1 uses versions forked off the Safari 1.2 one. This is also the reason for rather severe performance differences between OmniWeb and WebKit-based browsers.
OMNI’s explanation is that WebKit doesn’t give them enough flexibility; in addition, they like to use some of their own frameworks (which have been engineered since the early 90s, OMNI originally having been a NeXT company), such as their own networking/socket implementation.
August 2nd, 2005 at 9:12 pm
The IE team says they won’t be Acid ready in two years… and then Safari starts implementing multiple backgrounds? I knew there was a good reason why we decided to shift our company all mac, bless you safari:)
August 2nd, 2005 at 9:12 pm
I’ve haven’t tried it for myself yet, but the example Dan posted works great. Thanks for letting us know about it. Hopefully we’ll see this in Firefox and others soon, too. I can see a lot of good uses for this feature.
@Dan: OmniWeb bundles it’s own older version of WebKit. Look in the Frameworks folder in the OmniWeb app bundle. I believe this is so they can remain compatible with Jaguar, which would mean that they’re using the version of WebKit from Safari 1.2 (I think). Shiira uses the system version of WebKit.
August 3rd, 2005 at 7:24 am
[...] Safari supports some experimental CSS3 with mutiple background images. Link [VIA] Needless to say, this is really cool. I can’t wait till this technique can be used in r [...]
August 3rd, 2005 at 7:50 am
Just set up another test page for your amusement, all.
August 3rd, 2005 at 8:41 am
@Chris Clark:
Much better test page! I’ll see if I can come up with a little something better with mine later on today. Shaun Andrews actually directly linked to my test page! (Not that I mind of course…) I need to step up my game if that’s the case.
I may even try and implement this on the new petertoh.com website by redirecting Safari 1.3 and 2.0 users to the multi-background pages. It’s just too cool!
@Webkit Team: Got anything else we can play around with?
August 3rd, 2005 at 1:51 pm
Surprise of the century….
RealPlayer’s browser supports multiple background images as well.
I checked my test page and Chris Clark’s test page, and the both rendered correctly. I was using version 10.0.0 (331).
Oh, and thanks everyone for the info on Webkit and Omniweb!
August 3rd, 2005 at 3:35 pm
[...] 3-8-2005 } Chief Safari developer David Hyatt revealed this week that both Safari 1.3 and 2.0 have the capacity to support multiple ba [...]
August 4th, 2005 at 1:06 pm
Hello all… me again,
I’ve updated my test page to be a sort of mini-tutorial about a great use for multi-background images. Check it out!
Enjoy,
Dan
August 5th, 2005 at 2:16 am
Dan, OT but even though you specify a meta content type of application/xhtml+xml your server’s still sending text/html which is overriding it. If you want to change it you’ll need to set this up on your server.
August 5th, 2005 at 10:42 am
[...] últiples fons mitjançant CSS3 05/08/05 Safari ha implementat a mode de prova múltiples fons en un sol element tal i com especifica l’esborrany de CSS 3 Backgroun [...]
August 6th, 2005 at 12:56 pm
I threw up a quick demo page at http://amonre.org/pub/multiplebackgrounds/ . This demo uses 10 image to achieve the “window” look (I stole the theme from Kaleidoscope, in case you were wondering).
August 6th, 2005 at 1:19 pm
[...] Glad it’s back.
background-attachment: fixed;This is a CSS1 specification. While Safari is already including CSS3 draft features, IE7 doesn’t seem to get this handy CSS1 setting. T [...]
August 6th, 2005 at 1:32 pm
[...] Miscellaneous - No comments
Dave Hyatt recently wrote in Surfin’ Safari about WebKit’s support for multiple backgrounds. (Surfin’ Safari is the WebKit Open Source project [...]
August 9th, 2005 at 3:45 pm
[...] ultiple background images, that’s hardly practical right now - I know of only Safari supporting multiple background images a [...]
August 9th, 2005 at 6:08 pm
[...] versteckt sich in den Safari Versionen 1.3 und 2 ein Feature, das bisher unenteckt blieb. Die Entwickler haben, noch bevor der Standard überhaupt finalisiert wurde, schonmal Teile des CSS3 Backg [...]
August 11th, 2005 at 10:14 pm
You guys never cease to amaze me. This is amazing work!
Does Safari 2.0 also support the background-clip and background-origin properties? I’ve been playing around with layering and either those properties are not supported yet or I don’t understand how they work (which is quite possible). What’s the verdict?
August 11th, 2005 at 11:02 pm
Not supported yet, but will be soon.
August 13th, 2005 at 9:40 am
Thank you so much Safari team!
This is such a useful feature and something I’ve been longing for for a long time!
Like many of the previous posters I’ve put also together a test page, so if you haven’t seen enough fancy boxes here’s another one: http://event-horizon.twiddles.com/sites/experimental/css3-bg/
Enjoy!
August 13th, 2005 at 2:54 pm
Thanks Dave! Looking forward to the next (official) version of WebKit. It will certainly make for some nice Proteus and Adium themes.
August 14th, 2005 at 9:23 am
[...] einmal etwas über die verschiedenen Neuerungen in CSS 3 gelesen haben. Heute habe ich nun gelesen, dass es auch derzeit schon möglich ist verschiedene Sachen auszuprobieren. mehrerer Hintergrün [...]
August 14th, 2005 at 9:23 am
[...] einmal etwas über die verschiedenen Neuerungen in CSS 3 gelesen haben. Heute habe ich nun gelesen, dass es auch derzeit schon möglich ist verschiedene Sachen auszuprobieren. mehrerer Hintergrün [...]
August 18th, 2005 at 3:06 am
[...] ó algo que para mí es de suma importancia. Comentó que, tanto el Safari 1.3 como el 2.0 tr [...]
August 22nd, 2005 at 7:28 pm
[...] « Lots of things. Safari support for multiple backgrounds Straight from the horse’s mouth comes the news that dev releases of Safari 1.3 and 2.0 now support [...]
September 19th, 2005 at 12:40 am
I wrote a quick tutorial on this: Multiple Backgrounds (CSS3)
October 20th, 2005 at 8:17 am
[...] a pit of despair when it comes to web standards, and Safari works just fine with AJAX and leads the industry on some features of CSS. Well, anyway, Jeff Veen says it much better than I do. [...]
October 28th, 2005 at 7:43 pm
[...] ties of WebKit so that other web-related OS X applications can reap the benefits as well. Multiple background support has been added, as specified in CSS3. This effe [...]
January 1st, 2006 at 2:12 pm
[...] ccessibility with Firefox Zoom layout starter kit Automated testing - How useful is it? Safari supports multiple background images Excellent multiple background image demo Architecting CSS D [...]
February 26th, 2006 at 6:00 pm
[...] ltiple Backgrounds Filed under: General — Admin @ 1:59 am Surfin Safari - Blog Archive Multiple Backgrounds Safari 1.3 and 2.0 support multiple backgrounds a [...]
May 5th, 2006 at 11:11 pm
[...] ltiple Backgrounds Filed under: General — Admin @ 7:10 am Surfin Safari - Blog Archive Multiple BackgroundsPingback from Photo Backgrounds Surfin Safari - [...]
January 20th, 2007 at 10:58 am
[...] i release. Safari was the first browser to pass the Acid2 test, to support CSS3 Specs like multiple background images and CSS2 text-shadow. While I’m glad that the Safari developers are dedicated to [...]
June 24th, 2007 at 4:42 pm
[...] iPhone apps will not have the look and feel of native code. However, Safari has long provided CSS3 features and enhancements to provide fine control of the presentation layer. This functionality was long [...]