Thrive Knowledge Base

How to use the Background Section element

The user interface of the Thrive editor has been upgraded!
Please, check out the changes here, before proceeding.

Start by dragging & dropping the element to you page. At first, you will see no major changes, only a blank element added to your page.

You will need to use the options of the element that can be found in the sidebar to customize the background section to your liking and then, add content to it.

1. Section options

‘Stretch to fit screen width’ (a): this option helps you set up the size of your background section. After turning it on, you can adjust the 'Content Maximum Width' (b), as well as the 'Section Minimum Height' (c) by using the slider under these sections.

You also have the possibility to choose the content to cover the entire screen width and to match the height to the screen by checking the boxes next to these option.

Customizing the ‘Vertical Position’ (d) is another option that you have here. After you have added some content to your background section, you can choose how to align it (top, bottom or center) inside the background section.

2. Background Style

This option allows you to add different types of layers to your background section. You can add a 'Solid color', an 'Image', the 'Gradient' option, a 'Pattern' or even a video as a background.

These work well on their own, as stand alone backgrounds; but they could also be used in a more complex way. The 'Solid color', the 'Gradient' and the 'Pattern' could serve as effects for an image background for example.


To better understand what this means, first add an 'Image' to the background section. Click on the respective icon, then, add the image (a). You will be able to choose where to display it (b) and whether or not you want it as a static background (c).

Note: if you choose to make the image a static background then, the image itself will not move when visitors will scroll down on your page.

Only the content will be dynamic, whilst the background will be static. This is very similar to creating a parallax effect.

Solid color

The next step is to add a 'Solid color' as another layer. Select the color you like (a) and then, start to drag the line (b) to set its opacity. You will see that the image behind it appears and by choosing the opacity of the color you actually choose the color effect for the image. When you're satisfied with the effect, just click on 'Apply'.


If you wish, you can customize this image background even further, by choosing the 'Gradient' effect as the next layer. This can be linear or radial. Select it from the 'Orientation' option(a). If the effect is linear, you can also choose its angle (b). As with the other options, here you can also set a color and its opacity (c) in order to make your image background suitable for your needs.


Last, but not least, you also have the possibility to add a ‘Pattern’ as a layer for your image background. You can choose a pattern (a), and same as before, you may set its color and its opacity (b). 

If you wish to use any of the background style options on their own, you are welcome to do so by following the same steps as mentioned above, individually for the respective option.

The 'Background Style' also lets you add a video to the background section. In order to do this, you only have to turn on the 'Video Background' option, select the source you want to upload the video from (YouTube, Vimeo, Wistia or Custom - from your own device) and you're done. The video will be played in the background.

Tip: if you wish the video to be even more visible, you can increase the 'Minimum Height'

3. Decorations option

This option allows you to customize the sides of the background section. You'll have to select which side you want customized (a), then, the decoration type you want to add to it (b).

This can be either a 'Slanted edge', a 'Pointer', a 'Divider' or a 'Fancy Divider'. Each of them come with their own set-up options, like width, height, tilt, invert etc. that you can use to further customize them.

If you would like to find out more about how to use the 'Decorations' option, as well as the set of options for each decoration, please click on this link.

Adding content to the 'Background Section'

When you have finished customizing your background section, you can start adding content to it. This is pretty easy. All you have to do is select the element you wish to add and then, drag & drop it inside the background section.

Tip: make sure the content you add is visible and you don't use too intense colors when setting up the background itself.

If you wish to find out more about the Thrive Architect elements, please click here.

Hopefully this article was useful for you. If so, please give us a smile below :)