Put the photo behind your text as the background of a Container or TextBox, then darken or soften it with an Overlay Color so the words stand out. The settings are in Inspector > Shape Options. This works better than a separate photo with a TextBox on top, because the text stays on the photo on every screen size.
Put the text on the photo
Responsive pages
- Add a Container with the Containers button in the toolbar, and tick Full width in Inspector > Metrics.
- Go to Inspector > Shape Options (the second icon). Under Fill, choose Image Fill, click Choose... and pick your photo.
- Set the image scaling menu to Scale to Fill.
- Drag a TextBox into the Container, or click the + in the empty Container.
Centered Layout pages: select your TextBox and give it the photo as its fill in the same way (steps 2 and 3).
Make the text stand out
Try these in order. One or two are usually enough.
| Setting | Where | What it does |
|---|---|---|
| Overlay Color | Shape Options > Fill, below the photo | Lays a colour over the photo. Use the slider to set how see-through it is. Black at about half strength, with white text, works on most photos |
| Overlay Effects | Shape Options | Brightness below 0 darkens the photo. Blur softens a busy background. Others: Contrast, Saturation, Hue, Sepia, Invert, Grayscale |
| Background Mask | Shape Options | Tick it to fade the photo out towards one side (a Gradient Mask), then put your text on the faded side. Drag the slider ends to set Start Opacity and End Opacity, and turn the wheel to change the direction. Symmetric fades both sides. Or choose SVG for a shaped edge |
| Text Background Fill | Inspector > Text, under the font settings | A solid band of colour behind the words only |
Opacity (also in Shape Options) fades the whole object, including any text in it. To fade only the background, put a rectangle with a Color Fill behind the text and lower that rectangle's Opacity instead.
Choose how the photo fills its space
| Option | What your visitor sees | Use it for |
|---|---|---|
| Scale to Fill | Fills the whole area. Edges are cropped, more so on a phone | Photos behind text |
| Scale to Fit | The whole photo, with blank space if the shape doesn't match | Photos that mustn't be cropped |
| Stretch | Fills the area by stretching the photo, so it can look squashed | Plain textures, rarely photos |
| Original Size | The photo at its real size. Use Scale to resize it | Logos and small images |
| Tile | The image repeated like wallpaper | Patterns |
Keep the important part in view. With Scale to Fill, a phone shows a narrow slice of the photo. Click Adjust Focus Area..., select the part that matters, such as a face, and click Apply. EverWeb keeps that part in view as the screen narrows.
Common problems
| What you see | What to do |
|---|---|
| On a phone, the text covers the subject of the photo | Use Adjust Focus Area..., shorten the text, or set a Minimum Font Size in Inspector > Text |
| On a phone, the text and photo stack one above the other | The photo is a separate object. Put it in the Container's fill instead (see above) |
| The text looks faded | Opacity is lowered on the object that holds the text. Set it back to 100 and use Overlay Color |
| The overlay flickers on a photo with Parallax scrolling | Turn off either the Overlay Color or Parallax scrolling on that photo |
| The page loads slowly | Use photos saved at web size. See the Assets article below |
Check the result on your phone, outdoors if you can. Text that's easy to read on a big bright screen can be hard to read on a phone in sunlight.