This one produces a band across the page with a photograph behind it and readable text on top — the hero-style section every marketing page seems to need, built from one paragraph and no custom CSS.
Two images, one breakpoint
The bundle asks for a Background Image (Big Screen) and that field is required. A second, optional Background Image (Small Screen) is the part worth your attention: set it together with the Image Breakpoint, and a small script swaps the background on the wrapper when the viewport drops below that width. A wide landscape crop that reads beautifully on a desktop usually shows nothing but sky on a phone, and this is the fix.
Controlling how the photograph sits
- Image Sizing — cover, contain or auto.
- Image Alignment — nine positions, from top left through centre centre to bottom right.
- Image Repetition — repeat, repeat on one axis, or no repeat.
- Background Attachment — scroll, fixed or local.
- Image Container Min Height — the floor that stops a short block collapsing over a tall picture.
Making the text readable
Text over a photograph fails contrast more often than not. Two fields solve it: Image Overlay Color tints the picture, and Image Overlay Color Opacity takes a value from 1 to 100 to say how strongly. A dark tint at 40 to 60 is usually the difference between decorative and legible.
The words themselves go in Main Content, a required field that nests other paragraphs — so a heading, body text and a call-to-action bundle can all sit over the same photograph. Max Width constrains that content rather than the picture, which stays full width.
One thing to expect
This bundle has no title field of its own; it is deliberately content-only, and the heading comes from whatever you nest inside it. Enable paragraph_bundle_image_background on Drupal 11.3 or newer, then check the full field list on the Paragraphs Bundles module page.
If this is one piece of a bigger build, Drupal architecture services is where that conversation starts — or get in touch.
