How to change an element's background color, gradient or image

In TeleportHQ, you set a background in the Background section of the right panel: select the element, click +, and choose color, gradient or image. For an image, click its thumbnail to pick a picture and set its size and position. You can stack gradients and images, for example a dark gradient over a photo so white text stays readable.

Before you start#

• Background is available for containers, buttons, lists, list items and text inputs. Text, image and video elements have no Background section. To color a text's background, put the text inside a container.
• For an image background, upload the image first, or use a stock photo. See How to upload images, videos and files.

Add a background color#

1. On the canvas, click the element, for example your hero section container.
2. In the right panel, open the Visual tab and scroll to Background. It comes after Margin and Padding.
3. In Background, click + and choose color. A grey color (#D9D9D9) is added.
4. Click the swatch and pick a color, or type a hex value such as #FFF4E6. You can also pick a saved color from the field's list.

If the color shows in grey, it comes from a CSS class or a larger screen size. Type or pick a color to override it on this element.

Add a gradient#

1. Select the element.
2. In Background, click + and choose gradient. A default grey gradient is added.
3. Click the gradient preview. A side panel with the gradient picker opens, with 6 ready-made gradients.
4. Change the colors, or click a ready-made gradient.

You can also pick a saved gradient from the field's list.

Add a background image#

1. On the canvas, click the container, for example your hero section.
2. In the left sidebar, open the Assets Manager.
3. Right-click the image you want, for example hero-cake.jpg.
4. Click Set as Background Image. The image fills the container. This option shows when a container is selected.
5. In the right panel, under Background, click the image thumbnail. A side panel opens.
6. Set Size, Repeat and Position:
   • Size: cover fills the element, contain shows the whole image, auto uses the image's real size.
   • Repeat: for example no-repeat.
   • Position: click a spot in the 3×3 grid, for example the center.

You can also start from the right panel: in Background, click + and choose image. A placeholder image is added, sized to cover. Click the thumbnail, then click the preview in the side panel to open the Assets Manager and choose your image.

To add a new container that already has the image as its background, right-click the image in the Assets Manager and choose Add Container with Background Image.

Put a gradient over an image#

1. Add a background image.
2. In Background, click + and choose gradient. The new layer goes on top.
3. Set the gradient to semi-transparent colors, for example from black at 60% to transparent.

With two or more layers, drag a layer by its handle to change the order.

Check that it worked#

The element on the canvas shows the new background. If you set it on a smaller screen size, check the other sizes too: styles apply to the selected screen size and all smaller ones.

Troubleshooting#

Everything in the + menu is greyed out The element already has a background color, set on it or by one of its CSS classes. An element can have either a color or image and gradient layers in the Background section. Click − next to the color to remove it, then add the gradient or image. To keep a solid color under an image, add a gradient layer made of that one color instead.

Only color is greyed out in the + menu The element already has an image or gradient, or it gets a background color from a class or a larger screen size. You can still add more gradient and image layers.

The + button itself is greyed out This element has background values at a larger screen size. Switch to that screen size to change them.

The image field shows an error The address or file isn't valid. Click the thumbnail and pick the image again from the Assets Manager.

I removed the background, but a transparent value stayed When the background comes from a class or a larger screen size, − sets the color to transparent instead of removing it. See How the style panel works.

There's no video option TeleportHQ has no video background setting. Use a video element behind your content. See How to add a video background.

Good to know#

• Background colors and gradients can use your saved colors, so changing a saved color updates every background that uses it. See How to create and edit your site's colors.
• For icons, the Background color changes the icon's color.
• Stock photos from Unsplash and Pexels used as backgrounds stay linked to the photo provider on your published site.
• To change the page's background color everywhere, set a saved color as the background color in the Design Language panel.