Section Background
Customize the background appearance of your page sections to create visual hierarchy and atmosphere.
Background Color
Set a solid color as the section background.
Color Picker
Enter a custom hex color value or use the visual color picker.
Theme Colors
Quick access to 8 colors from your site theme:
- Primary, Secondary, Accent
- Background, Background Alt
- Text, Text Secondary, Border
Preset Colors
13 standard color options:
- White, Light Gray, Gray, Dark Gray, Black
- Red, Orange, Yellow, Green, Blue, Indigo, Purple, Pink
Background Image
Use an image as the section backdrop.
Uploading an Image
Click to upload or drag and drop an image file (JPG, PNG, WebP up to 10MB).
Image Size
Control how the image fills the section:
| Size | Description |
|---|---|
| Cover | Fill entire section, may crop edges |
| Contain | Fit within section, may show gaps |
| Original | Use image's actual size |
| Repeat | Tile the image as a pattern |
Image Position
Use the 3x3 grid to position the image:
↖ ↑ ↗
← ● →
↙ ↓ ↘
Position options: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right.
Scroll Behavior
- Scroll - Image scrolls with the page
- Fixed - Parallax effect, image stays in place
Background Overlay
Add a color overlay on top of background images to improve text readability.
Overlay Color Presets
- Black - Dark overlay (#000000)
- White - Light overlay (#FFFFFF)
- Dark Blue - Moody overlay (#1e3a5f)
- Dark Green - Natural overlay (#1a3d2e)
- Custom - Pick any color
Overlay Opacity
Slider from 0% (transparent) to 100% (opaque). Adjust to balance image visibility with text legibility.
Reset to Theme Default
Remove all custom background settings and revert to your theme's default section appearance.
Tips
- Use subtle backgrounds that don't compete with your content
- Consider how backgrounds look on mobile devices
- Use overlays to ensure text remains readable over images
- The parallax (fixed) scroll effect adds depth but can affect performance