CSS background image hacks

crop-sprite Emulating background image crop, background image opacity, background transforms, and improved background positioning. A few hacks relying on CSS pseudo-elements to emulate features unavailable or not yet widely supported by modern browsers.

Pseudo-element hacks can fill some gaps in existing browser support for CSS features, without resorting to presentational HTML. In some cases, they even make it possible to emulate things that are not currently part of any W3C working draft, like background transforms and background image opacity.

Most of the hacks in this article tie in with the pseudo-element hack described in an earlier article – Multiple Backgrounds and Borders with CSS 2.1. That article already describes how to emulate multiple background support and its demo page shows several other uses of the basic principle. This article presents a few of those effects and applications in greater detail.

Pseudo background-crop
Known support: Firefox 3.5+, Chrome 3+, Safari 3+, Opera 9+, IE 8+.

Each example uses one sprite and semantic markup. The sprites are cropped using a CSS pseudo-element. When combined with the pseudo background-position hack it can be used to crop images that are positioned behind an element’s content.
My Content Here

Pseudo background-transform
Known support: Firefox 3.5+, Chrome 5+, Safari 4+, Opera 10.5+, IE 9+.

These examples use transform and pseudo-elements to reduce the number of images required. The pseudo-reflection hack is created without using -webkit-box-reflect.

Pseudo background-position
Known support: Firefox 3.5+, Chrome 3+, Safari 3+, Opera 10+, IE 8+.

This background image can be positioned from the right and bottom because it is using a pseudo-element to act as an additional background canvas.The CSS3 background module allows this but is not yet implemented in many browsers. The pseudo-element technique also has the added benefit of being able to crop a background image and even position it partially, or completely, outside its container.

Posted in blog