8 months ago


102 The Principles of

102 The Principles of Beautiful Web Design background-image If we want an image to be used as the background of an element, we can specify that image using the background-image property. The possible values for this property are url('filename') or none. If we wanted to set the background of an element to animalcracker.png, we’d add the following declaration to that element’s style rule: background-image: url('animalcracker.png'); background-repeat There are four possible values for background-repeat: repeat, repeat-x, repeat-y, and norepeat. The default value is repeat, which sees that the specified background image will be tiled vertically and horizontally. The repeat-x setting will cause the background image to be repeated horizontally. This is handy if you want to apply a horizontally tiling image or gradient to an element, but want the rest of that element to be filled with the specified background color. Similarly, repeat-y specifies that the background image should be repeated vertically. Finally, no-repeat is used when you have a background image that you don’t want to tile at all. The effect of each of these settings is shown in Figure 3.21. Figure 3.21. The effects of different background-repeat settings on animal crackers background-attachment This property determines whether the background image stays in the same location or moves with the content when the page is scrolled. It can be set to the values of fixed or scroll, the latter of which is the default. When background-attachment is set to fixed, the background will be fixed relative to the viewport (or browser window), so that when you scroll the page, the background image will stay in the same location. background-position This property controls the position of a background image and accepts two values: the horizontal and vertical position of the image. These values can be set using keywords (right, center, or top for the horizontal position; top, center, or bottom for the vertical), using CSS measurements, or using percentages. For example, if you wanted a background image to be centered horizontally and aligned to the top of an element, you could specify this using keywords (background-position: center top) or using percentages (background-position: 50% 0%). If we wanted to position the image 300 pixels from the left edge, and 400 pixels from the top, we could use the

Texture 103 declaration background-position: 300px 200px. The effect of both of these possible values is shown in Figure 3.22. Figure 3.22. Animal crackers with different background-position settings To summarize all this information quickly, the developers of CSS have created a shorthand property, which allows us to specify all five of these properties in a single background declaration. It works like this: element { background: background-color background-image background-repeat ➥background-position background-attachment; } As an example, consider the following two rules that produce exactly the same output—a row of repeated animal crackers displayed on an orange background, along the bottom of a div with id="hihopickles": #hihopickles { background-color: #FF9900; background-image: url('animalcracker.png'); background-repeat: repeat-x; background-position: left bottom; background-attachment: fixed; } #hihopickles { background: #FF9900 url('animalcracker.png') repeat-x left bottom fixed; }

Layout and Design - In Easy Steps
Boot Camp
30 ways to create amazing web experiences on tablets
Download PDF -
Responsive Email Design Guide - e-Dialog
The Complete Guide to a High Converting Website
PDF Specimen Booklet - Fontworks UK Ltd
Visual Design for Library Websites - WebJunction
Web Site Design & Usability Testing - HIPNet
How to build a department web site (starter pack) - University of ...
Visual Design and Web Site Usability
Creative Services - Keiger Graphic Communications