Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Part II: PropertiesHow It WorksIn Example 10-3, you deploy all possible keyword values of the background-repeat property. Youbegin with an example of repeat, the default value, which tiles the background image along both thex-axis and y-axis. Then you include the repeat-x keyword, which limits the background image torepetition along the x-axis. The repeat-y keyword, naturally, limits the background image to repetitionalong the y-axis. Finally, the no-repeat keyword stops repetition all together.In the next section, I discuss the background-position property.The background-position PropertyThe background-position property, as its name implies, allows you to control the placement of thebackground. The following table shows the possible values for the background-position property.PropertyValuebackground-position [ | ]{1,2} | [ [top | center |bottom] || [left | center | right] ]Initial value: 0% 0%At first glance, this property looks a little complicated; in truth, it isn’t all that complex. The notationboils down to this: The property allows one or two values that express the position of the background.Square brackets are used to group the possible values. The following is the first subgrouping of valueswithin the first grouping:[ | ]{1,2}The first grouping indicates that the value may be a percentage or length value. Either one or two valuesmay be provided. The second subgrouping is preceded by a vertical bar, which indicates another possibilityfor the value:| [ [top | center | bottom] || [left | center | right] ]The second grouping indicates that either one or two keyword values may be provided. If two valuesare provided, it may be any keyword from the first grouping combined with any of the keywords fromthe second grouping. In addition, any of the keyword values can be mixed with either a or value.Figure 10-7 demonstrates some possible values for the background-position property.350