New Style and Modify Style Dialog Boxes, Background

The Background category of the New Style and Modify Style dialog boxes enables you to define cascading style sheet (CSS) style rules for the background of a Web page or of individual elements. You can apply these style rules to HTML elements, or you can add them to the current page or to an external style sheet.

To define a CSS background style rule for UI elements on the current page

1. Open the page in either Design view or Source view.

2. Optionally, select the text or HTML elements to apply the style to.

3. In the Format menu, click New Style.

   The New Style dialog box is displayed.

4. In the Category pane, select Background.

   The background style selections are displayed in the right pane.

When you apply styles to selected text in Design view, style attributes are inserted inline into the HTML markup for the page. Switch to Source view to review the new style attributes.

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

1. Open an existing external style sheet.

2. Put the cursor inside the braces of the style rule to be modified.

3. Do one of the following.

   • Right-click the style sheet in the editor, and then from the shortcut menu, choose Build Style.

   • In the Style Sheet Toolbar, choose Build Style.

   The Modify Style dialog box is displayed.

4. In the left pane, click Background.

   The background style selections are displayed in the right pane.

You can apply a CSS style class to an element in the Web page or to the body element itself by setting the element's class property to the name of the class selector.

• How to: Use the CSS Properties Window

• Walkthrough: Creating and Modifying a CSS File

• Walkthrough: Working with an Existing CSS File

• Walkthrough: Basic HTML Editing in Visual Studio for Web Forms Pages

UIElement List

The following tables list options that are available under the Background category in the New Style and Modify Style dialog boxes.

Background Options

• background-color
  The background color of an HTML element. To choose from more colors, use the down arrow, or click the square icon on the right. For more information, see More Colors and Color Dialog Boxes.

• background-image
  The image to use for the background of the Web page. The image must have been previously added to your project. Because the background image might not always render, it is good practice to also set the background color.

• background-repeat
  How a background image will be repeated. Values are as follows:

  • no-repeat   The image is not repeated.

  • repeat   The image will be repeated vertically and horizontally.

  • repeat-x   The image will be repeated horizontally.

  • repeat-y   The image will be repeated vertically.

  • inherit   The background-repeat style will be inherited from a parent element.

• background-attachment
  Whether the background image is fixed or scrolls with the rest of the Web page. Values are as follows:

  • fixed   The image is fixed and does not scroll.

  • scroll   The image scrolls with the rest of the Web page.

  • inherit   The background-attachment style is inherited from a parent element.

• (x) background-position
  The horizontal positioning of the background image. If you specify a value, you can select units in the list.

• (y) background-position
  The vertical positioning of the background image. If you specify a value, you can select units in the list.

Other UI Elements

• Selector
  (New Style dialog box only) Enables you to type a class name or click an HTML element to apply the style to. Class names must begin with a period (.). You can also select (inline style), which causes the style to be applied inline to the selected text or HTML elements.

• Define in
  (New Style dialog box only) Enables you to specify where to write the definition of the style rule. Values are as follows:

  • Current page   The style rule is written to a style element in the current page.

  • New style sheet   A new CSS style sheet is added to the project and the rule is written in it.

  • Existing style sheet   The style rule is added to the CSS style sheet that you specify by using the URL list.

• URL
  (New Style dialog box only) Enables you to select an existing CSS style sheet. This option is enabled only when Define in is set to Existing style sheet.

• Apply new style to document selection
  (New Style dialog box only) Specifies that the style is applied to the selected text, class, or HTML element.

• Preview
  Displays an example of how the style rule will appear when it is applied.

• Description
  Shows the CSS definition of the style rule.

See Also

Working with CSS Overview