Background Panel splits a block into segments, each with its own background image. Hover over a segment and the background changes to its image while its text and button appear. Turn on autoplay and it moves through the panels by itself.
Four Background Panels with different settings: walking holidays on autoplay, a pottery studio that only moves on hover, a venue with icons and a photo strip with titles only. Move your mouse across the segments to switch the image and reveal the text.
Autoplay every 4 seconds with Show content on autoplay turned on, so the active panel opens by itself. Hover to take over. Icon, text and button in each panel.
Seven days hut to hut, with a guide and bags carried between stops. Around six hours of walking a day.
Our toughest week. Long days above the tree line for walkers who are happy on steep, rocky ground.
Cliff paths, sandy coves and small harbour towns. A gentle week with plenty of time for swimming.
Five days on the coast path past arches and stacks, staying in family-run guest houses.
Autoplay off, so nothing moves until a visitor hovers. No icons, a warm brown hover overlay, centred text and a square-cornered button.
Six Tuesday evenings on the wheel. Beginners welcome, clay and firing included.
Make bowls, cups and planters with coils and slabs. No wheel needed.
A Saturday workshop on glazes. Bring your bisque ware and take it home a week later.
Vases, jugs and tableware made by our members, on sale every weekend.
Each panel has an icon, a title and a line of text but no button. A purple hover overlay and a slower 5 second autoplay that changes the image without opening the text.
Seats 120 for talks, with a bar and screens in the main hall.
Birthdays, anniversaries and leaving dos, with a late licence until 1am.
The light-filled upstairs studio suits yoga and pilates groups.
Rent a pitch at our Saturday food market. 30 stalls, indoors and out.
Just an image and a title in each panel. No text or button, a low 340px height and a light hover overlay, so the photos do the work.
Add a panel for each item you want to show, then set the size and overlay.
Drop Background Panel onto your page and set its width and height.
Give each panel a background image, an icon, a title, some text and an optional button.
Set the overlay colours and text styles, and turn on autoplay if you want it to move by itself.
One block that shows several items without taking up more space.
Each panel has its own background image that fills the whole element when active.
Hovering over a segment shows its image and marks it as active.
Each segment's text and button slide into view when a visitor hovers over it, keeping the layout clean.
Move through the panels on a timer you set. Autoplay pauses while a visitor hovers.
Add a solid or gradient overlay, with a different overlay on hover, so text stays readable.
Below 768px the segments stack on top of each other, so each one stays readable.
Good for showing a few big ideas side by side.
Show each service with its own photo and a link to find out more.
Let visitors hover over places and see each one full size.
Show rooms or properties with a short description and a booking button.
Give each range a large image and a button to its category page.
Show a few key projects in one block.
Use it as a hero that changes as visitors explore the options.
This is the full list of settings in the Breakdance editor.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Panels | Repeater. Each panel has a Background Image, Icon, Title, Content (rich text) and Button (text and link). | 3 panels |
| Autoplay | ||
| Autoplay | Move to the next panel on a timer. It waits while a visitor hovers over a segment. | Off |
| Speed | Time between panels, in milliseconds. | — |
| Show content on autoplay | Give the active panel the hover overlay and open its text while autoplay runs. | Off |
| Container | ||
| Width | Width of the element, per breakpoint. | 100% |
| Height | Height of the element, per breakpoint. | 700px (500px tablet, 800px phone) |
| Overlay | Solid or gradient colour over each segment. | Dark gradient |
| Hover Overlay | Solid or gradient colour on the hovered or active segment. | #000000BF |
| Segments | ||
| Min Width | Starting width of each segment before it grows to fill the row. | — |
| Title Typography | Font, size, colour and alignment of the titles. | — |
| Content Typography | Font, size, colour and alignment of the text. | — |
| Button | ||
| Button | Style, colours, corners, size and typography of the panel buttons. | — |
| Icon | ||
| Color | Icon colour. | — |
| Size | Width and height of the icon. | — |
As many as you like. Each panel becomes a segment, so three to five usually fits best across the width.
Yes. While a visitor hovers over a segment the autoplay waits, then carries on when they move away.
Yes. The button only shows when it has text, and the icon is optional.
Below 768px the segments stack vertically. Set the width, height and segment min width to suit other spaces, like the column layout in the demo.
Yes. The image, icon, title, content and button fields accept dynamic data.
Background Panel is included with Phox Elements, along with 140+ other premium elements for Breakdance.