HTML and CSS Reference
In-Depth Information
For example, the following rules…
background-color: transparent;
background-image: url(image.jpg);
background-position: 50% 0 ;
background-attachment: scroll;
background-repeat: repeat-y;
… could be combined into the following single line:
background: transparent url(image.jpg) 50% 0 scroll repeat-y;
And you don't have to specify every value. If you leave a property out, its
default value is used instead. For example, the line above has the same
output as:
background: url(image.jpg) 50% 0 repeat-y;
Common Uses Of Backgrounds
Aside from their obvious use of making elements more attractive,
backgrounds can be used for other purposes.
FAUX COLUMNS
When using the CSS property of
float
to position layout elements, ensuring
that two (or more) columns are the same length can be di
!
cult. If the lengths
are di
"
erent, then the background of one of the columns will be shorter than
the background of the other, spoiling your design.
Faux columns is a very simple background trick that was first written up on A
List Apart. The idea is simple: instead of applying a separate background for
each column, apply one background image to the parent element of the
columns with that image containing the designs for each column.
