Export (0) Print
Expand All
Expand Minimize

Background, Style Builder Dialog Box

The Background page of the Style Builder dialog box makes it possible for you to set attributes for a cascading style sheet (CSS) style that will define a background color or image when the style is applied to an HTML page, or table. You can either apply these attributes directly to HTML elements or add them to CSS style rules.

To apply background attributes directly to HTML elements on your page

  1. Open your HTML document in Design view of the HTML Designer and select the element to format.

  2. Click Style on the Format menu to open the Style Builder dialog box.

  3. Click Background in the left pane of the Style Builder dialog box.

    The Background, Style Builder dialog box appears in the right pane.

When you format elements selected in Design view, CSS style attributes are inserted inline into the HTML markup for your page. Switch to HTML view to review the new style attributes inserted.

To add background attributes to a CSS style rule defined in an external style sheet

  1. Open an existing external style sheet and place the insertion point within the curly braces ({ }) that follow the selector for the desired style.

  2. Click Build Style on the Styles menu to open the Style Builder dialog box.

  3. Click Background in the left pane of the Style Builder dialog box.

    The Background, Style Builder dialog box appears in the right pane.

NoteNote

The Styles menu appears when you open an external CSS style sheet for editing. On the Styles menu, the Build Style option becomes available when you place the insertion point within the curly braces that follow the selector for a style rule.

A CSS style class defined in an external style sheet can be applied to an element within the <BODY> element of a Web page (in this case, including the <BODY> element itself) by assigning the CSS style selector as the CLASS property for the desired element.

Options available on the Background page of the Style Builder dialog box include the following.

Background Color

Color

Sets the BACKGROUND-COLOR attribute for the style. Select an option from the drop-down list or click the ellipsis button (...) to open the Color Picker dialog box and select additional colors. For example, if you select Red, the following CSS markup is inserted:

BACKGROUND-COLOR: red

Transparent

This check box is used to set the BACKGROUND-COLOR attribute to the value transparent. If you select transparent, you cannot select a background color. The following code is inserted:

BACKGROUND-COLOR: transparent

Background Image

Image

Sets the image the style will display in the background. Type a path and file name in the field or click the ellipsis button (...) to open the URL Picker and go to the location of the image. For example, if you navigate to an image named Background.bmp in the Images folder, the following code would be inserted:

BACKGROUND-IMAGE: url (images/background.bmp)

Tiling

Sets the tiling attributes for the background image assigned by the style. Images can be tiled several different ways, as shown in the following table.

Tiling attribute

Description

Tile in horizontal direction

Image is tiled from left to right across the page, but not from top to bottom.

Tile in vertical direction

Image is tiled from top to bottom once.

Tile in both directions

Image is tiled both horizontally and vertically.

Do not tile

Disables tiling; image appears in locations specified by the position value and does not repeat.

<Not set>

No option chosen; no code added to the style.

For example, if you choose Tile in horizontal direction, the following CSS markup is inserted:

BACKGROUND-REPEAT:repeat-x

NoteNote

 The Tiling attributes work in conjunction with the Position attributes. If you position the image, tiling attributes are applied based on the starting position of the image on the page. For example, if you position an image at the upper-left corner of a page and tile horizontally only, the image repeats along the top edge of the page.

Scrolling

Sets the BACKGROUND-ATTACHMENT attribute for the background image applied by the style. Select a value from the drop-down list. An image can either remain fixed as the page scrolls, or scroll along with the text and images above the background. Select <Not Set> (no option chosen), Scrolling background, or Fixed background. For example, if you choose Scrolling background, the following CSS markup is inserted:

BACKGROUND-ATTACHMENT:scrolling

NoteNote

When the attribute is <Not Set>, no code is added to the style.

Position

Sets the position attributes for the background image applied by the style. The position value relates to the tiling attributes. If you set a position for the background and do not choose tiling attributes, the background image is fixed at the specified position. If you set a position for the background and choose tiling attributes, the position serves as the starting point for the tiling attribute.

NoteNote

You must select both horizontal and vertical position values. If you specify only one value, the CSS Editor displays an invalid property name. When you select both horizontal and vertical position values, the property is displayed correctly as BACKGROUND-POSITION. An example of a valid background-position declaration is BACKGROUND-POSITION:left center.

Horizontal

Sets the horizontal position for the background image applied by the style. Select <Not Set> (no option chosen), Left, Center, Right, or Custom. If you select Custom, the fields to the right of Custom are available. The default value is 50%. Enter a value in the number field and choose an increment (px, pt, pc, mm, cm, in, em, ex, or %) from the unit field's drop-down list. If you choose Custom and accept the default values, the following CSS markup is inserted:

BACKGROUND-POSITION:50%

NoteNote

When the attribute is <Not Set>, no code is added to the style.

Vertical

Sets the vertical position for the background image applied by the style. Select an option from the drop-down list: <Not Set> (no option chosen), Left, Center, Right, or Custom. If you select Custom, the fields to the right of Custom are available. The default value is 50%. Enter a value in the number field and choose a unit option (px, pt, pc, mm, cm, in, em, ex, or %) from the unit field's drop-down list. If you choose Custom and accept the default values, the following CSS markup is inserted:

BACKGROUND-POSITION:50%

NoteNote

When the attribute is <Not Set>, no code is added to the style.

Do not use background image

When selected, removes the background image from the current page. The Image attributes are unavailable in the dialog box. If an image had been specified for the page, the BACKGROUND-IMAGE property is removed from the style after you click OK.

Community Additions

ADD
Show:
© 2015 Microsoft