Internet Explorer and Safari assume the body is
the full view area height when there??™s no content, thereby setting an image with a
background-position value of 50% 50% directly in the center of the viewing area. Firefox
and Opera instead assume the body has an effective height of 0, thereby placing the background
vertically at the top of the view area (in fact, you only see the bottom half). For
consistency across browsers in this case, you can define both background-position and
background-attachment (as fixed), although this means the background will not scroll
with the page content.
CSS shorthand for web backgrounds
As when defining margins and padding, you can use shorthand for web background values,
bundling them into a single background property, although it??™s worth stating that the
shorthand value overrides any previous settings in a CSS file for individual background
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
48
properties. (For instance, if you use individual settings to define the background image,
and then subsequently use the shorthand for setting the color, the background image will
most likely not appear.)
When using shorthand, you can set the values in any order. Here??™s an example:
body {
background: #ffffff url(background_image.gif) no-repeat fixed 50%
?? 10px;
}
Generally speaking, it??™s best to use shorthand over separate background properties??”it??™s
quicker to type and easier to manage.
Pages:
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113