Background controls

Background properties control what fills the space behind an element’s content. Site Designer lets you build backgrounds from solid colors, images, gradients, and combinations of all three — all without writing CSS manually.

Background color

The simplest background is a solid color. Click the color swatch in the Style pane to open the color picker, which accepts hex, RGB, RGBA, and HSL values.

Use RGBA when you need a semi-transparent background — for example, a dark overlay on a hero image (rgba(0, 0, 0, 0.5)). This is different from using the opacity property, which makes the entire element (including its text children) transparent. RGBA background only affects the background layer.

Background image

Click the background image field and either select a file from your Resources panel or enter a URL. Once an image is applied, three additional controls become relevant:

background-size — Controls how the image fills the element:

• cover — scales the image to fill the container entirely, cropping if necessary (most common for hero backgrounds)
• contain — scales the image to fit entirely within the container, showing empty space if proportions differ
• Custom px or % values — set an exact width, or auto for one dimension

background-position — Sets where the image is anchored. Site Designer provides a visual grid picker (9 positions) as well as free-form x/y value fields for precise control.

background-repeat — Controls tiling:

• no-repeat — image appears once (most common with cover/contain sizing)
• repeat — tiles in both directions
• repeat-x / repeat-y — tiles horizontally or vertically only

background-attachment

background-attachment: fixed causes the background image to stay in place as the page scrolls — a parallax-like effect. The image appears to scroll slower than the content on top.

Gradients

Site Designer provides gradient builders for both linear and radial gradients.

Linear gradient — fades from one color to another along a direction (angle). You define:

• The angle (0deg = bottom to top, 90deg = left to right, 180deg = top to bottom)
• Color stops (at least two colors, with optional positions like 50%)

Radial gradient — emanates from a center point outward in a circle or ellipse. Useful for spotlight effects and soft, central color glows.

Gradients are technically background-image values in CSS, which means they stack above a background-color. You can use a gradient over a fallback solid color for browsers that do not support gradients (rare today, but still good practice).

Multiple backgrounds

CSS supports layering multiple backgrounds on a single element. In Site Designer, click the + button in the background section to add another layer. Layers stack from top to bottom — the first background listed appears in front.

A common use case is a semi-transparent color overlay on top of a background image:

1. First layer: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)) (a solid dark overlay)
2. Second layer: your background image

This lets you read white text over any background image without editing the image itself.

Blend modes

background-blend-mode controls how the background layers (color, image, gradient) blend with each other. Options include multiply, screen, overlay, darken, lighten, and others borrowed from photo editing software.

Blend modes are a creative tool — combining a background image with a solid brand color using multiply or color blend mode, for example, produces a duotone effect entirely in CSS.