Background Properties

There are five background properties that can be used to set the background of an element. They are listed in order as follows:

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

Background-color: This specifies the background color of an area such as a page background, a table cell, a div block, a heading, etc. You can use a hex value (#ffffff), a named color (blue), an RGB value written as rgb(00,00,00), or use a value of transparent. You can apply a background color to an entire page by redefining the body tag or to other elements where you want a background color to appear.

The example below sets a white background color within the body tag using a hex color value:

body {
  background-color: #ffffff; }

Background-image: This setting allows you to set an image as a background. There are only two settings for this attribute: none and url. Setting the value to none is normally used when you want to remove an image that was previously set. Using url requires that you specify the file location of your image as shown below:

body {
  background-image: url('images/imagename.jpg'); }

Background-repeat: The default setting for the background-repeat value creates a tiled effect so that your image repeats both  horizontally and vertically to fill the space in which it is placed. The settings include repeat, no-repeat, repeat-x,  and repeat-y. No-repeat causes the image to appear only once at the position you set. Repeat -x makes the image tile horizontally while repeat-y makes it tile vertically.

Background-position: This property sets the background position of the image relative to the element. Position values are as follows:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

A style rule using the background-position property would look like this:

body {
  background-image: url('images/imagename.jpg');
  background-position: top right; }

Background-attachment: Values for this property are scroll and fixed. You can choose whether or not to have your background remain in a fixed position when the page scrolls. Fixed instructs the browser not to scroll the background with the rest of the elements. Scroll is the default setting and instructs the background to scroll along with the other page elements.

Quick Menu Links

Expression Web Basics:

Choose a Topic Downloading Your New Template Unzipping Your Template Files Opening Your New Web Template Tour - What's Inside FrontPage vs. Expression Web Tables vs. CSS Positioning

Expression Web Tutorials:

Choose a Topic Setting Up Expression Web Inside Expression Web Web Site Settings The Formatting Toolbar Editing Dynamic Web Templates Editing Include Pages Changing Page Title and File Names Adding and Deleting Pages Meta Tags Hyperlinks and Bookmarks Preview in Browser Before You Publish - A Checklist Publishing Your Web

Learning More:

Choose a Topic Let Expression Web Teach You Expression Web .Style1, .Style2, etc. Removing Unwanted Formatting How to Add or Modify Styles Keeping XHTML Error Free Information on Validation Ecommerce and Shopping Carts From Web-Bots to Better Navigation Search Engines Build a Better Web Site

Solving Problems:

Choose a Topic Receiving Form Results by Email Form Errors - Troubleshooting Cleaning Up Old Files and Folders Page Display and Image Issues SWF Object Detection Script Design View Quirks

ProStores Tutorials:

Choose a Topic Your ProStores Template Package Adding a New Store Version Restore The Basic Editor Installing New Template Files Store Logo File Uploading Your Design Images Activating Your New Store Version Editing the Header Image Editing ProStores "Pages" Editing/Tweaking Template Files Your ProStores Product Images Images and Security Warnings ProStores - Learning More

About CSS:

Choose a Topic Preface CSS Rules Background Rules Font Rules Text Controls The Box Model Margin, Border,  and Padding Lists About Hyperlinks Styling Forms with CSS About Divs The DocType Resources

---

Shorthand Properties

Some properties, like the background property, are made up of several values. To reduce the size of your CSS file and also save some keystrokes as well as bandwidth, they can all be specified as one shorthand property.

For example, the background properties listed below...

body {
  background-color: #ffffff;
  background-image: url('images/image.jpg');
  background-repeat: repeat-x; }

...can also be written as

body {
  background: #ffffff url('images/image.jpg') repeat-x;}

Shorthand properties exist for many items such as background, font, border, margin, and padding controls. It is important, however, that the values be listed in their specific order.

In the shorthand rule written to the left, the background-color is first, followed by the background-image. The background-repeat is set to repeat-x so it will tile horizontally. There was no need to set a background-position since the default is top left. Because this background will scroll with the rest of the page elements, there was no need for a background-attachment value. Any property that is omitted will use the default.