3 CSS3 Background Properties

Using large-scale, responsive background images has become a current trend in Web development. Coupled with JavaScript routines like Skrollr and Scrollspy users can control both foreground HTML elements  and background images depending on their scrolled position on a page. Here is an analysis of the use of big images and background changes used in Newsweek in innovative ways. However,  the JavaScript coding is non-trivial so some Designers have passed up on designs using these background image manipulations.

But with the addition in CSS3 of new background image properties, Designers can now manipulate background images beyond the REPEAT-X, REPEAT-Y, and other options. These new CSS3 background properties afford designers three types of control –
1)whether the background image scrolls or stays fixed – the background-attachment property
2)where precisely the background image is precisely  positioned – the background-position property
3)how the background image is clipped by its containing element – the background-clip property
The following example illustrates these properties in action:

Pull down on the scroll bar to see the scrolling action of the background images.

First and foremost, is the ability to control the scroll behavior of a background image with the background attachment property. This CSS property is like the POSITION:FIXED property in CSS1. See in the example above how the background orange dawn image scrolls with the background in the first DIV block; but in the second DIV block the blue+cyan image remains fixed during the scrolling. This is used to great effect by Newsweek with large background images in some of its stories.

My personal favorite is the ability to control the positioning of a background image more precisely, going beyond the REPEAT-X, etc options. Now one can precisely control the placement of background images and still use the REPEAT options as required. However a colleague likes the ability to shape the background image using the background-clip property of a element along with the PADDING and/or BORDER settings. See the code below for each usage from the example:


There is a touch of bonus code in which we demonstrate the use of the POSITION:FIXED CSS to create an always present menu-bar at the top of the screen. Note how the NAV element uses inline styling to achieve a stationary menu bar at the top of the screen.

In sum, this CSS3 background-property code is declarative and largely straight-forward in comparison to some of the JavaScript scrolling code. Thus developers have a new set of simple Web image layering controls for their designs.