In our last article on Cascading Style Sheets, we discussed applying color with CSS. In this article, we will discuss how to apply CSS background properties and how to use images as backgrounds.
As with color properties, background properties can be applied to a HTML element or selector (class or ID). Again, if background properties are applied to the top most item, all elements under that item will inherit that style unless overridden with another style.
Background Images Using CSS
In addition to background colors, you can specify a background image to be displayed. If you use an image, it is good to specify a background color in case the image is unavailable. The background image is displayed on top of the background color. A background image is specified using the "background-image" property.
Syntax: background-image: url(<uri>) | none
The "url" is the location of the image and must be enclosed in parenthesis and preceded by the "url" keyword. The "url" location can either be a full URL to the image or a partial URL. If you use a partial URL, the "url" is relative to the location of the document that contains the property.
body { background-image: url(logo.gif); }
body { background-image: url(http://someplace.com/logo.gif); }
Positioning Images using CSS
Background images can be positioned using the "background-position" property.
Syntax: background-position: <percentage> | <length> | left | center | right
Images are positioned according to the top-left corner of the image. Percentage and length values are expressed as a horizontal (x) and vertical (y) values. If only one value is used, the second value is presumed to be center. Of course, you can use the keywords, left, center, and right, to position the image. The keywords are for the horizontal position, the vertical position will default to 50% or centered vertically on the screen.
background-position: 50% 50%; /* image centered on screen */ background-position: 50%; /* this also centers on screen */ background-position: 100px 100px; background-position: center;
Repeating Images
You might notice that when you place a background image on the screen, it tiles. It will repeat left to right, top to bottom for the entire length of the page. You might not want this so you can specify how a background image repeats using the "background-repeat" property.
Syntax: background-repeat: repeat | repeat-x | repeat-y | no-repeat
The "repeat" keyword is the default. All background images will repeat by default. Using the "repeat-x" or "repeat-y" keywords will limit the image to just horizontal or vertical, respectively. The "no-repeat" keyword will force it to display on one image.
background-repeat: repeat; /* default */ background-repeat: repeat-x; /* repeat horizontally */ background-repeat: repeat-y; /* repeat vertically */ background-repeat: no-repeat; /* don't tile the image */
To Scroll or Stay Put
What if you want to place an image in the center of the page, but you don’t want it to scroll when the page scrolls. There is a property for that, too. It is called the "background-attachment" property.
Syntax: background-attachment: scroll | fixed
It has 2 keywords, scroll and fixed. The "scroll" keyword is the default. Background images will scroll with the page unless the "fixed" keyword is used. The "fixed" keyword tells the browser to keep the image where you place it. The other HTML elements will scroll, but the background image will stay put.
background-attachment: scroll; /* default */ background-attachment: fixed; /* force image to stay put */
CSS Background Shorthand
As you can see, there is a lot of control over the background. You have control over the color and the image. All of these properties can be written individually or you can use a shorthand property to combine all these properties into one. The "background" property will combine all these into one property.
Syntax: background: <background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>
That is a pretty long property, but it will help reduce the file size of the CSS, which improves download times. The actual order of the values is not important as long as it contains valid values. For the sake of readability, it is best to order the values according to the syntax above.
With the "background" property, you can take this:
background-color: white; background-image: url(logo.gif); background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed;
And change it to this:
background: white url(log.gif) no-repeat fixed 50% 50%;
You can see how that will shorten the file, especially, if you have many background properties in your style sheet.
Conclusion
As you can see, there are a lot of background properties. Combine the color properties from the last article with the background properties from this article and you can create stunning websites.
