Share via

Background, Style Builder Dialog Box

  • Article

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.

Note

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.

Tasks

UI Elements

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

    Note

     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

    Note

    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.

    Note

    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%

    Note

    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%

    Note

    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.

See Also

Concepts

Working with CSS Overview

Reference

Text, Style Builder Dialog Box

Font, Style Builder Dialog Box

Position, Style Builder Dialog Box

Layout, Style Builder Dialog Box

Edges, Style Builder Dialog Box

Lists, Style Builder Dialog Box

Color Picker Dialog Box

Other Resources

Other, Style Builder Dialog Box