How to Use the Background Style Option
The “Background Style” option is one of the various ways in which you can customize a Thrive Architect element. The option is available for most of the Thrive Architect elements. When you edit a page and select an element, you can find this option in the left sidebar, among the general options.
It allows you to add different types of layers to your "Background Section". You can apply only one layer, or you can choose to build up different types of them.
As an example, I will use the “Background Style” option on a “Background Section” element.
The first thing you need to do is add the element to your page.
Just like in the case of every Thrive Architect element, in order to add it to your page, click on the plus sign from the right sidebar:
Then, select the element that you want and drag & drop it where you want it to be placed on your page.
In the left sidebar, you will notice the element options. You can customize it using the main options as well as the general options:
Look for the "Background Style" section and, once you have found it, click on it in order to open the options that it includes:
As you can see in the section that opened, with the help of the "Background Style" options you can add a "Solid color", an "Image", a "Gradient", a "Pattern", or even a video as the background of your element.
You can choose the layer types by clicking on the icons next to the “Add layer” option:
Here are all the layer types and how to use them:
The first type of layer available in this option is the “Solid Color” one. This will make your background one color, for which you can modify the opacity.
Click on the “Solid Color” icon in order to open it:
This will open a color picker pop-up:
You can choose the color of your background by manually picking a color using the color picker, or by entering a HEX/RGB code:
Furthermore, you can set the opacity of the color. The default opacity is set to 100. Enter a value in the box next to “Opacity” in order to change it:
There is also a section called “My Colors”, where you can quickly choose a color that you have previously saved:
Once you’re happy with the color and its options, click on “Apply”:
The second available layer type is the “Image” one, where you can upload your own image to use it as a background. Click on the “Image” icon to open the layer options:
Then, click on the "Choose image" section to add the image from your Media Library. Check out this article if you are not familiar with the image uploading process:
Once the image is added, you will be able to choose where to display it , using the "Image Display" drop down, as well as the option next to it:
If you click on the field below the "Image Display" option, a drop down menu will open. The first option there is the “Default” one:
Choosing “Default” from the drop down menu will keep the default size of your picture after inserting it inside the "Background Section":
When you choose the “Default” option, this message will show on your image, allowing you to drag the image around to reposition it as you wish:
The next way in which you can display the image is by choosing “Cover” from the “Image Display” drop down:
This option scales the image as large as possible, without stretching the image. If the proportions of the image differ from the element, the image will be cropped either horizontally or vertically so that there will be no empty space:
The image will have the maximum width, so you will not be able to move it from side to side. A message will show on top of the image, allowing you to move the image up or down to reposition it:
The next “Image Display” option is the “Contain” one. This will place the image and make it fit your "Background Section" heightwise:
To use it, go back to the drop down menu and choose the third item from the list:
You will be able to move it around from side to side, just by hovering over the image and dragging it to the left or to the right:
The last option you can choose from the drop down menu is the “Percentage” one, which allows you to choose the exact percentage of the height and the width of the image. To select it, click on "Percentage" in the drop down menu:
You will be able to customize the size of the image, which will look similar to this when you upload it:
You can do that by using the “Width” and “Height” sliders, or by manually entering a percentage value inside the boxes next to the sliders:
You are able to move the image around up-down or side to side as much as you need to.
Next to the “Image Display” option, there is a square that you can use in order to set the position of your image:
The square contains 9 dots. You can click on any of them in order to position your photo (in one of the corners/middle top/middle bottom, etc. of the "Background Section").
For example, if I click on the upper right corner, the image will be placed as shown below:
Once you’ve picked a way in which your image should be displayed, you can also choose if you want the image to be repeated or not. You can do that by using the “Repeat” option:
If you click anywhere on the field, a drop down menu will open:
If you choose the “Repeat Vertically” option, your image will repeat in the empty vertical space of the "Background Section", as shown below:
You also have the option to repeat the image horizontally, thus filling in the empty horizontal space of the "Background Section":
The last item from the option drop down is the “Repeat Both” one. This will fill in both the empty horizontal and vertical space from the "Background Section":
Note: The “Repeat” option is only available for the “Default” and “Percentage” image display styles.
Don’t forget to click on the “Apply” button once you’re done:
Static Background Image
After you’re done with the “Repeat” option, you have one more option in the “Image” section, which is the “Static Background Image” one, with a check box in front of it:
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.
To choose the option, simply check the box in front of it:
These are all the ways in which you can customize the “Image” layer.
The next available one is the “Gradient” layer. To choose it, click on the third icon next to the “Add layer” option:
All the options available for this layer will open in the left sidebar:
The gradient that you add can be linear or radial. Open the drop down menu next to the "Orientation" section by clicking on the field next to it:
Now, choose the preferred option (linear or radial):
If the effect is linear, you can also choose its angle. Do that either using the angle wheel next to the option, or by manually entering a numerical value in the box next to the option:
Below the "Angle" option you can see a bar. This bar can be used to specify the percentage/the ratio of the gradient color, that you want to add as a layer for your "Background Section". The percentage refers to the intensity with which the color will blend into another one (aka form the gradient).
In order to define this, simply hover over the part of the bar where you want the percentage to be (you will see a plus sign appear next to the cursor) and then click on it.
If you wish, you can also define more ratios by clicking on more parts of the bar:
You can then choose the gradient color, by using the color picker or by manually entering a HEX/RGB code:
You can also set the opacity by entering a value in the dedicated field:
Don’t forget to click on “Apply” when you’re done:
The other orientation type which you can use for the “Gradient” option is the “Radial” one. To choose it, open the the drop down next to the “Orientation” option and click on “Radial”:
Besides the “Angle” option, which is not available in this case, you can customize the "Radial" orientation type using the same options that are available for the “Linear” gradient too, as explained above.
Next in the "Add layer" list, you have the possibility to add a "Pattern" as a layer for your background.
Choose it by clicking on the “Pattern” icon next to the “Add layer” option:
This will open the "Select pattern" section. From here you can choose a pattern as the background:
You can also set its color, as well as opacity if you click on the field next to the "Color" option:
This will open the color pop-up, which you can use just like in the case described above.
When you’re done, click on “Apply”.
The last layer type you can add to the "Background Section" is the “Layer Effects” one.
If you want to choose it, click on the last icon next to the “Add layer” option:
You can choose different types of background effects. To choose a type, click on the field next to the “Type” option:
A drop-down will open, with the various background effects:
You can find more information about what each of these effects mean in this article.
When you choose one of these options, a slider will appear below it, allowing you to set the amount for each effect.
If you choose “Hue Rotate”, instead of the slider, you will see a circle that you can rotate in order to set the angle.
Click on “Apply” in order to save the modifications.
Choose a Color
The next part of the “Background Style” section is the one where you can choose a color as your background. If you want to do that, click on the field:
The way to choose a color as a background is just as described above.
The "Background Style" also lets you add a video as the background. First, activate the option by clicking on the switch:
Then, a drop down menu will open. Select the source you want to upload the video from (YouTube, Vimeo, Wistia, Externally Hosted Video or upload one - from your own device) and then, follow the steps according to the source you have chosen:
If you need to read more about how to upload a video from these sources, you can find information about it in this article.
These are the ways in which you can customize your “Background Section” element using the “Background Style” option.
As mentioned in the beginning of the article, this option is available for various Thrive Architect elements. Whichever element you decide to customize the background style for, the steps will be exactly the same as in the case of the “Background Section” one.
If you want to understand how other Thrive Architect elements work, make sure to check out our knowledge base.
I hope this article was useful for you. If that’s the case, make sure to reward our efforts with a smile below :)