How to work with Background Property of Cascading Style Sheets

To work with Background Property of Cascading Style Sheets

The Background tab of the CSS Selector Inspector lets you set the background of the block (or box) generated by a style. You can use an image or color as a background.

Step 1.

• First of all, you have to select a style in the Style Sheet window, and then click the Background tab in the CSS Selector Inspector.

Step 2.

• To set a background image, select the Image option, type a URL for the image file, and then press Enter.

• You can also click Browse to locate the file, or use Point and Shoot to link to an image in the site window.

• Select Absolute to use an absolute path.

• When you set a background image and a background color that will be used when the image is unavailable.

Step 3.

• To set a background color, choose one from the Colors pop-up menu, or drag a selection from the Web-Safe Colors tab () of the Color Palette.

Step 4.

• To tile image horizontally, vertically, or in both directions, choose an option from the Repeat pop-up menu.

  1. Repeat tiles the image both horizontally and vertically.
     

  2. Repeat x tiles the image horizontally.
     

  3. Repeat y tiles the image vertically.
     

  4. Once sets this property to no-repeat, disabling tiling.

Step 5.

• To set a background to scroll or not scroll with other elements on the page (background-attachment property), choose an option from the Attach pop-up menu.

  1. Choose Scroll if you want the image to scroll.
     

  2. Choose Fixed if you don’t want the image to scroll.

Step 6.

• To set the position of the image within the element block (or box), choose a length unit, a percentage, or any of the Left, Center, Right, or Top, Center, Bottom keyword options from the Top and Left Units pop-up menu, type a number in the Top and Left text boxes, and then press Enter.