Accessing Global Styles

To begin customizing global styles, follow these steps:

1. Log in to your platform’s admin dashboard.
2. Navigate to Appearance in the left-hand menu
3. Click on Editor to open the editing interface.
4. In the editor, locate and click on the Styles section. Then click on the Pencil Icon. This will display all available global style options.
5. Click on the Background Color.

Changing or Adding a Background Image

1. Background Image Preview
   1. You will see a thumbnail of the current background image if one is already set.
   2. To change or remove it, click on the thumbnail.
2. Select / Replace Image
   1. A media library or image selection popup will appear.
   2. Choose from existing images in the Media Library or upload a new image.
   3. Click Select (or Choose Image) to apply it as the site’s background.
3. Best Practices
   1. Image Resolution: Use a reasonably sized image for faster page loading.
   2. Aspect Ratio: Wide, panoramic images often work well for full‐width backgrounds.
   3. File Format: JPG is common for photographs; PNG may be used for images needing transparency.

Adjusting Focal Point

The Focal Point tool lets you control which part of the image remains centered or most visible on various screen sizes.

1. Focal Point Overlay
   1. After selecting a background image, you’ll see a circular handle on a preview of your image.
   2. Drag the circle to the area you want to highlight.
2. Left and Top Percentages
   1. Alternatively, you can manually input numeric values under Left and Top to position the focal point precisely. For example, Left = 50%, Top = 50% centers the image both horizontally and vertically.
3. Why Focal Point Matters
   1. Different screen sizes or background cropping can cut off parts of the image. Adjusting the focal point ensures the most important area stays visible.

Fixed Background Toggle

1. Fixed Background
   1. If you enable the Fixed background toggle, the background image remains stationary when the user scrolls (often referred to as a “parallax” effect).
2. Performance Consideration
   1. Some older browsers or certain devices may not fully support parallax backgrounds. Test your site across devices to ensure a smooth user experience.

Background Size: Cover, Contain, or Tile

Under Size, you can choose how the background image behaves within the browser window or container:

1. Cover
   1. Scales the image to cover the entire background area without repeating.
   2. Portions of the image may be cropped depending on screen size, but there won’t be empty borders.
2. Contain
   1. Scales the image to fit entirely within the background area.
   2. The entire image will be visible, but it may leave blank (colored) space around the edges if the aspect ratio differs from the screen.
3. Tile
   1. Repeats the image in a grid‐like pattern horizontally and vertically.
   2. Typically used for patterns or textures.

Auto/px and Repeat Options

Beneath the size options, you’ll see some additional controls:

1. Auto / px
   1. This can control the specific scaling dimensions of the image if you prefer to define its size in pixels rather than relying on Cover or Contain.
   2. “Auto” uses the image’s natural aspect ratio.
   3. If you switch to px, you can set exact width/height in pixels for more precise control. 
2. Repeat Toggle
   1. When enabled, the image repeats (tiles) horizontally and vertically if Tile is selected or if the image is smaller than the container.
   2. When disabled, no tiling occurs, and the background may show empty space if the image doesn’t fill the entire area.

Tips and Best Practices

1. Keep File Sizes Manageable: Large background images can slow down your page. Consider optimizing images or using image compression plugins.
2. Focal Point for Mobile: Always verify how your background appears on mobile devices. You may need to shift the focal point if a key area is cut off.
3. Use High‐Contrast Text: If you place text on top of a detailed or bright background image, ensure the text color is clearly visible.
4. Experiment with Parallax: The fixed background option can add visual interest, but test thoroughly for performance and readability.

Fallback or No Image: If you remove the background image entirely, your theme’s default background (often a color) takes over.