Mark Scerri – Eye on the web

Background size allows you to scale the CSS background image you are using. Until now background-size as intended in CSS3 is not supported in any browser, however Chrome, Opera, Safari, and Firefox 3.6 alpha all implement their own custom markup. Here is an example:

body {
    background-image: url(img1.jpg);
    background-size: 60% 40%; /* w3 spec - no browser supports it yet */
    -moz-background-size: 60% 40%; /* used for firefox */
    -o-background-size: 60% 40%; /* used for opera */
    -webkit-background-size: 60% 40%; /* used for safari and chrome */
}

It is important to note that these proprietary controls will be ignored by other browsers so you can start using them immediately. Of course always test with other borwsers to see how your web page displays in browsers (such as Internet Explorer) that do not yet support the background-size property.

Now this is cool! Multiple background images can allow you to do some awesome tricks with layout without the need of writing complex markup to your website.

The basic syntax for multiple backgound images in CSS3 is easy. Instead of listing a single image source for your background-image property, you list up to a maximum of four comma-separated images. You can also specify up to four values for the respective background-repeat and background-position properties for each of the images. So here’s the code:

#multiBackground {
  background-image:url(img1.png), url(img2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, top right;
}

So for the million dollar question, which browsers currently support multiple background images? At the moment it’s Safari 4.0, Chrome 3.0, and Firefox 3.6. But beware Firefox 3.6 is only in alpha so the number of users using this browser will be only a handful.

So is it worth the hassle? One of the problems is that other browsers reject the code and will not even display the first image because of the comma in the decleration, leaving the background blank. However there is a workaround for this. First you declare the background-image in the usual way (single image). Opera and older versions of Firefox and Safari ignore any newer CSS code. For Internet Explorer one can use conditional comments to send the single-image code.

Multiple background images can be used for wonderful effects, HOWEVER, make sure that your website will work with older browsers, and with new browsers that do not support this technique.

Over the years the CSS headache and the support of CSS have improved. In fact currently we have a considerable set of browsers with CSS 2.1 support: Safari, Firefox, Chrome, Opera, and Internet Explorer. In fact these 5 major browsers are also implementing some CSS 3 support in their rendering engines. The following is a list of CSS 3 implementations to add some spice to your web site.

Tim Brown achieves a pure CSS text-gradient in Safari and Markus Stange experiments with box shadows in “Fun with Box Shadows“. He manages to produce impressive effects in Firefox 3.5 and there is also some support of box shadows in Chrome and Safari.

Jonathan Snook has demonstrated a text rotation trick with CSS 3 using the transform extension that works in Safari and Chrome and Firefox 3.5. He also demonstrates that by using the proprietary Microsoft filterproperty this technique can also be supported in Internet Explorer.

CSS Text Shadows apart from Safari and Chrome, are now also supported by the latest versions of Firefox and Opera browsers.

The list continues with RGBA support, custom fonts, and of course rounded corners. These are all supported in Chrome, Safari, and Firefox 3.5.