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.