Adding Backgrounds to Pictures

If using the Simplified view:

1. 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.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.
3. From the area below, select the img tag. If you created classes of the tag, you can click the plus button next to the <img> tag and select the class instead.

4. In the local toolbar of the editor, click . The Properties dialog opens.

5. Select the Background tab.

6. 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:

   1. Next to the Image field, click the Browse button.

      The Insert Picture dialog opens.

   2. Select an image file to insert. You can do this in one of the following ways:

   • Select an image already in the project by finding and selecting it in the built-in tree.

     OR

   • Click to find and select an image file outside of the project.

   Note: If you want to select an image file that you recently inserted somewhere in your project, click the down arrow in the field next to the Browse button and select the file from the list.

   3. Click OK.
   4. 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.
7. In the Properties dialog, click OK.

If using the Advanced view:

1. 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.
2. In the upper-left corner of the editor, click in the Show Styles field and select Show Image Styles.
3. From the area below, select the img tag. If you created classes of the tag, you can click the plus button next to the <img> tag and select the class instead.
4. From the Show Properties drop-down list on the upper-right side of the editor, select Show: Property Groups.

5. 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.

6. 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:

   1. To the right of background-image, click and select an image already contained in your project.
   2. If you want the background image to repeat, click in the cell to the right of background-repeat and select one of the options (definitions from http://www.w3.org).
      • no-repeat The image is not repeated: only one copy of the image is drawn.
      • repeat The image is repeated both horizontally and vertically.
      • repeat-x The image is repeated horizontally only.
      • repeat-y The image is repeated vertically only.

Press CTRL+S or click to save your work.