By using the Background option of the main menu you can customize the background of each selectable element.
Select an element. Go to Background.
If you want to upload an image in the background, click Upload Image and select it from your Computer. If you are not happy with the outcome, you can always select Clear Image.
In order to set the exact position of the image, go to Image Position. Here you have 2 possible ways of horizontal/vertical alignment:
- by using percentage – you can either select left /center/ right alignment for your image, or custom, by typing the percentage that best suits your needs
- by using pixels – you can set the horizontal/ vertical position by setting the distance in pixels
*Note: The size of the images cannot be modified in the editor. You should either edit it in a separate program or set the size of the element containing the image by moving the Green Knob. Another option is to go to Tools -> Dimensions in order to set the exact parameters.
If you are using an image that is smaller than the dimensions of the element containing it, or if you are using patterns for the background, you can choose to Repeat the image Horizontally or/and Vertically.
Another way of customizing the backgrounds is by using color. Click Bkg. Color and choose one from the palette. If you want to use the exact same color for another element (either in the background, for the border, or text), copy its HTML code from the Fill color dialog box, select the other element and paste the code back in the dialog box.
The Transparent option eliminates any background colors from the elements; in this way a child element will have the background of its parent.
If you don’t want the background to be fully transparent, you can set its Opacity. In this way you can assign a color to an element’s background but it will blend with the background of its parent. If you set different background colors for different elements of the layout, Opacity can be useful if you want to obtain a certain harmony or transition between the parent’s background and the descendant’s.
*Note: Please take notice of the difference between the Background Color Opacity from the Background dialog box and the Master Opacity option from Tools. The Master Opacity assigns the degree of transparency for all the child elements of a parent. For example: if you want to set the opacity only for the background color of the header, use the Background Color Opacity option. On the other hand, if you want to set the opacity for the entire header (background + title + image + site’s menu), use the Master Opacity.