How to add a background to a text box using a style
-
Complete one of the following sets of steps, depending on whether you want to use the Simplified view or Advanced view in the Stylesheet Editor.
- Simplified The Simplified view is better for new users. It provides an easier way to apply properties to styles, with format options available from a toolbar (similar to the way one would use the Text Format toolbar to change the look topic content without a style). In many cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, auto-numbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.
- Advanced The Advanced view displays style classes and properties in hierarchical tree structures. It is not as quick as using the Simplified view, but it allows you to edit a great deal more settings than are available in the Simplified view.
- In the local toolbar, make sure the first button displays
(which means that the Simplified view is currently shown in the editor). If the button displays 
instead, then click it. - In the upper-left corner of the editor, click in the Show Styles field
and select Show Paragraph Styles. -
Select the appropriate <div> style. If you use the default style when inserting the text boxes, then select div. Otherwise, if you have used a class of that style that you created previously, then select it instead.
-
In the local toolbar of the editor, click
. The Properties dialog opens. -
Select the Background tab.
- Use the tab to specify the settings that you want for the background.
Set a color for the background:
- In the Color field, click the down arrow and select a color from the popup. For advanced color options, select More Colors and use the fields in the Color Picker dialog.
Add an image to the background:
Next to the Image field, click the Browse button.
The Insert Picture dialog opens.
- Select an image file to insert. You can do this in one of the following ways:
- Click the Browse button. Then navigate to the image file on your computer and select it. The path to the file is then displayed in the File field. You can see a preview of the picture at the bottom of the dialog.
- Use one of the shortcut options in the Choose Source section. After you select an option, the appropriate image files display to the right. Select an image from the list. The path to the file is then displayed in the File field.
- All images in the project This option displays all image files in your project.
- Recently opened images This option displays the most recent image files that you have opened.
- Open images This option displays all other image files that are currently open.
- Images in the current folder This option displays all other image files that are located in the same folder
- Images used in this document This option displays all other image files that have already been inserted into the current topic.
- Recently inserted images This option displays the most recent image files that you have inserted.
- Images in the 'My Pictures' folder This option displays all of the images files located in the My Documents\My Pictures subfolder on your computer. (In Vista, the folder is called "Documents" instead of "My Documents.")
- Click OK.
- If you want the background image to repeat, select one of the options from the Repeat field. You can also set the image position horizontally and vertically by using the X and Y fields.
- In the Properties dialog, click OK.
- In the local toolbar, make sure the first button displays (which means that the Advanced view is currently shown in the editor). If the button displays instead, then click it.
- In the upper-left corner of the editor, click in the Show Styles field and select Show Paragraph Styles.
-
Select the appropriate <div> style. If you use the default style when inserting the text boxes, then select div. Otherwise, if you have used a class of that style that you created previously, then select it instead.
- From the Show Properties drop-down list
on the upper-right side of the editor, select Show: Property Groups. -
In the Properties section, click the plus button
next to Background to expand the group.The property name is shown in the left column. The right column is used for selecting and entering values for the property.
- Locate the background property that you want to change, depending on what you are trying to accomplish.
Set a color for the background:
- To the right of background-color, click the down arrow and select a color from the popup. For advanced color options, select More Colors and use the fields in the Color Picker dialog.
Add an image to the background:
- To the right of background-image, click and select an image already contained in your project.
- If you want the background image to repeat, click in the cell to the right of background-repeat and select one of the options.
- Press CTRL+S or click
to save your work.
If using the Simplified view:
If using the Advanced view:
See Also