Background and Overlay in AI Website Creator
Replace section background images and use Default, Off, Black and Strength to keep text readable in AI Website Creator.
A background image sets the mood of a section. An overlay darkens that image so text remains readable. Edit the picture and the section overlay separately: replacing a photo does not mean you have chosen the right contrast for your headline.
At a Glance
| Task | Control | Scope |
|---|---|---|
| Change the background picture | Background image's Replace panel | Selected image slot |
| Keep the template treatment | Overlay > Default | Selected section |
| Remove the template scrim | Overlay > Off | Selected section |
| Darken the image | Overlay > Black | Selected section |
| Adjust darkening | Strength | Only appears for Black |
Replace a Background Image
Double-click the image-backed background area to select its underlying picture. Use Replace > Stock, Library or Generate just as you would for a normal image. Crop from the preview if the subject needs a different composition.
Background images often fill a section with a cover-style layout. A wide desktop section and a narrow mobile section can show different parts of the same picture. Choose media with enough room around the subject and check both widths.
Open the Section Overlay Controls
Select the section to open its section panel. The Overlay row appears when the section has an overlay layer that the editor can control. It is not a command to add a new overlay layer to every image on the page.
If Overlay is missing, the selected section may not have a compatible template overlay. Selecting a content image is also different from selecting its containing section. Do not assume every picture supports the section overlay controls.
Overlay Color and Mode
| Option | What it does | Strength behavior |
|---|---|---|
| Default | Keeps the template author's overlay treatment | No Strength slider |
| Off | Explicitly removes the controlled overlay | No Strength slider |
| Black | Applies a black scrim to the background | Shows Strength |
Default and Off are not interchangeable. A template may already have an overlay, and Default preserves it. Off is an explicit instruction to remove it.
The section overlay offers Black, not an arbitrary color picker or a brand-color tint. Use site or section styling for background colors. Use the overlay when the purpose is contrast over a photograph.
Adjust Overlay Strength
Choose Black
In the section's Overlay row, choose Black. The Strength slider appears.
Set the darkening
Adjust Strength and inspect the headline, body text and buttons over the image. The range is 10% to 90%, in 5-percentage-point steps. When no saved strength exists, the value is 50%.
Check the whole section
Release the slider to save the selected strength. Review the responsive preview, especially where text crosses bright highlights. Keep enough image detail visible while making the text easy to read.
Image Overlay Versus Section Overlay
The image panel also has an Overlay toggle with Yes and No. That is an image-level display control. The section panel's Default, Off and Black options act on the template's section overlay layer and provide Strength for Black. Use the section control when you need to manage a scrim behind section text.
Practical Contrast Checks
- Check the brightest area behind each line of text, not only the average color of the photograph.
- Avoid placing a face or product detail directly behind a long headline.
- If stronger darkening hides the subject, try a different crop or another image.
- A darkened image does not guarantee accessible contrast for every button or text color. Review the final combination.