Amazingly, the CSS3 background shorthand syntax is still not working across the gamut of modern browsers. Here’s how we can work around it…

Like most of the other discrepancies and annoyances I’m encountering of late, it’s Safari (and therefore iOS) that is the main annoyance, thanks in no small part to it being impossible to ignore (in case you haven’t noticed, there are a few popular iDevices you may have heard of).

The CSS3 background shorthand should allow the author to define a number of background properties in a single property/value combination.

Here’s an example of what should be working. Although I’m using Compass here to create an inline (base64) image, this is still following (and producing) the W3C syntax and should work:

background: inline-image("svg/image.svg") center / auto 14px no-repeat;

Here’s a breakdown of that syntax: first is the url of the image (the part in brackets/parenthesis) then the position (center in this instance although I could use ‘top center‘ or 10px 20px if using pixels), then a forward slash to seperate background-position from background-size, which is defined next (in this instance I’m using ‘auto‘ for the width and ‘14px‘ for the height) and then the ‘no-repeat‘ declaration. There are additional properties that can be specified for background-origin, background-clip and background-attachment but I have omitted them here (defaults exist for when they are not specified).

Chrome displays this with flying colours. So does Opera (tested on 12.12). However, Safari (desktop as of 6.02 or iOS 6) doesn’t. Neither does Firefox (as of 17.0.1). Haven’t tried IE9/10.

So, in the meantime, if you want all these properties on a single element working cross modern browser, you’ll have to long-hand it. Here’s that same declaration done long-hand:


background-image: inline-image("svg/image.svg");
background-position: 50% 50%;
background-size: auto 14px;
background-repeat: no-repeat;

This works in all the aforementioned browsers. If you are wondering why Chrome is gaining more and more traction amongst developers, this is just one more reason.

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp