CHAPTER 6 ■ BOX MODELS PROPERTIESBackground
Problem You want to put a background color or image behind an element.^
Solution Apply styles as follows:
Use background-color to set the background color of an element.
Use background-color:transparent for a transparent background color.
Use background-image:none to show no background image.
Use background-image:url("file.jpg") to display an image behind the contents of an element. The
image fills the padding area of the element.
Use background-repeat:repeat to tile a background image across and down to fill the entire padding
area. This is the default value.
Use background-repeat:repeat-x to tile the image across one row.
Use background-repeat:repeat-y to tile the image down one column.
Use background-repeat:no-repeat to not tile the image.
Use background-position to set the horizontal and vertical starting location of the image. This applies
whether or not the image is tiled.
Use background-attachment:scroll to scroll a background image when the user scrolls the content.
This is the default value.
Use background-attachment:fixed to prevent the image from scrolling.
The background property is a composite of all these properties. The property values can be presented in
any order. Each property value is separated by a space. background:none transparent repeat left
top scroll; is the default.
Pattern SELECTOR { background-color: COLOR;
background-image: url("file.jpg");
background-repeat: CONSTANT;
background-position: HORIZONTAL VERTICAL;
background-attachment: SCROLL_FIXED; }
Location This design pattern applies to all elements.
Tips background-position requires two values: the first for the horizontal position and the second for
vertical. Percentages position an image at a percentage of an element’s width and height. Pixels position it
at an offset. Ems position it proportional to the element’s font-size. Whenever you assign a
background-image to an element, you should also assign a background-color and a contrasting color.
This provides a fallback in case the image doesn’t load, and it ensures that text doesn’t become invisible or
hard to see, such as white text on a white background.
You can scale a background image with the use of the background-size property: for example,
background-size:80px 60px. The first value gives the width of the corresponding image, and the second
value gives its height. If only one value is given, the second is assumed to be auto. The background-size
property is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari.
Example All the spans in the example are assigned to display a transparent GIF of a star on a black background,
starting at lower left in each span. Specific spans override these settings to demonstrate various
background settings.
Related to Box Model (Chapter 4); Stacking Context, Atomic (Chapter 7); Font, Highlight, Text Decoration, Text
Replacement, Invisible Text (Chapter 10); Inline Decoration, Inline Horizontal Rule (Chapter 11);
Background Bulleted, Horizontal Rule (Chapter 13); Fade-out, Semi-transparent, Replaced Text, Content-
over Background Image, CSS Sprite, Shadowed Image, Rounded Corners (Chapter 14); Striped Tables,
Table Selectors (Chapter 15); Undersized Columns (Chapter 16); Padded Graphic Dropcap, Floating
Graphic Dropcap, Marginal Graphic Dropcap (Chapter 18); Block Quote, Inline Block Quote (Chapter 19);
Graphical Alert (Chapter 20)