Learn how to set background color, image, and repeat options for elements on your event website.
The Background style group (added via Add Style) includes three properties: Color, Image, and Repeat.
Background Color
Click Background Color then click the preview box to open the color picker. You can enter a color using any of the following methods, and switching between them automatically converts the current value:
- HEX — A six-character hex code. Two additional characters can be appended to control transparency (
00= fully transparent,FF= fully opaque). - RGBa — Red, Green, Blue, and Alpha (transparency) values.
- HSLa — Hue, Saturation, Lightness, and Alpha values.
Background Color is transparent by default
When you first add a Background Color, the transparency is set to fully transparent. Move the transparency slider all the way to the right to make the color fully opaque.
For more on color formats, see CSS Legal Color Values on W3Schools.
Background Image
Click Background Image then click the preview icon to open the Choose Image window and select an image.
Once an image is set, three additional options become available:
Image Size
Controls how the background image is scaled within the element.
| Option | Description |
|---|---|
| auto | The image is displayed at its natural size. Default. |
| contain | Scales the image to fit within the element without cropping. May leave empty space on the sides. |
| cover | Scales the image to fill the entire element, cropping if necessary. |
| 100% | Stretches the image to fill 100% of the element's width. |
Image Attachment
Controls whether the background image scrolls with the page or stays fixed.
| Option | Description |
|---|---|
| scroll | The image scrolls with the page. Default. |
| fixed | The image stays fixed in place relative to the browser window as the page scrolls. |
| local | The image scrolls with the element's own content. |
Image Position
Controls where the background image is anchored within the element.
| Option | Description |
|---|---|
| top left | Anchors the image to the top-left corner. |
| top center | Anchors the image to the top edge, centered horizontally. |
| top right | Anchors the image to the top-right corner. |
| center left | Anchors the image to the left edge, centered vertically. |
| center center | Centers the image horizontally and vertically. Default. |
| center right | Anchors the image to the right edge, centered vertically. |
| bottom left | Anchors the image to the bottom-left corner. |
| bottom center | Anchors the image to the bottom edge, centered horizontally. |
| bottom right | Anchors the image to the bottom-right corner. |
Background Repeat
Click Background Repeat to open a dropdown controlling whether and how the background image tiles to fill the element.
| Option | Description |
|---|---|
| repeat | Tiles the image both horizontally and vertically. The last tile is clipped if it doesn't fit. Default. |
| repeat-x | Tiles the image horizontally only. |
| repeat-y | Tiles the image vertically only. |
| no-repeat | Displays the image once with no tiling. |
| space | Tiles the image as many times as possible without clipping, distributing whitespace evenly between tiles. |
| round | Tiles the image and scales it to fill the space without gaps or clipping. |