- Where to find it
- Labelled Background Image in the Widget Settings drawer (gear in the widget header).
- Per device
- Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.
- Underlying CSS
backgroundImage
In plain English
Paints an image behind the whole widget, underneath every row. Pick one from your team's media library or point at an https URL, then use Size, Position, and Repeat to say how it is drawn.
Because this sits on the outermost box, the picture runs continuously behind all the rows rather than restarting in each one.
When you would use it
- The entire embed should sit on one photograph or texture.
How to change it
- Open Widget Settings, then "Background Image".
- Choose a picture, then set Size to cover and Position to the part that matters.
- Set a Background Color as well, for the moment before the picture loads.
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.
Watch out for
- A row or column Background Image paints on top of the widget image for that band or box.
- The picture only covers the area the widget actually occupies on the consuming page, which may be shorter than the screen.
Related settings
For developers
The technical reference for what this setting produces: MDN: background-image. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.
Where to go next
- Back to the full attribute reference
- The Composer — the editing surface these settings live in.
- Publishing — how a change like this reaches your live site.