Pseudo background-position

Part of CSS background image hacks

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.


This uses a repeating background image, offset from the edges of the container. Includes gratuitous use of border-radius, opacity, and box-shadow.