Customizing Backgrounds

Last Updated on

What is a Background?

Simply, a background is what you see in the back theme of your subject. It can be image, color, sound, and video. In Jupiter X, we have options to set global or page level background color, background image or gradient background color. But the video and the audio background is not provided globaly in the theme customizer.

In this article, we’ll describe the settings of the types of backgrounds which you can add and customize.

All of the settings below can be found in the WordPress sidebar, Appearance > Customize.

In this article


Classic Background Color

The classic background is just a solid color in back of your content. You can find the background option almost anywhere in the Theme Customizer.

In customizer, the option to add solid color background looks like this:

One thing to mention here is that the elements you see on your website are divided into two parts:

  1. Theme parts.
  2. Elementor elements.

Here we are only explaining backgrounds which you can set via the Theme Customizer.

How can I set different background for different devices?

Sometimes you need to set backgrounds differently on different devices. In Customizer, there is a tool which lets you do it. But it’s only available only for the places that it needs different backgrounds. So, whenever you saw this icon in front of the background pane, it means that you can choose different devices and set different backgrounds on those devices.

 

To add background color through customizer:

1
From the WordPress left menu, go to Appearance > Customize.

2
From the customizer left dashboard, go to Layout.
3
In the layout popup, go to Styles tab > Page.
4
Add your custom background color.
5
Close the popup and Publish the changes.

Gradient Background Color

What is Gradient Background Color?

Gradient background color lets you display smooth transitions between two or more specified colors.

CSS defines two types of gradients:

  1. Linear Gradients (goes down/up/left/right/diagonally)
  2. Radial Gradients (defined by their center)

With customizer, you have full control over the gradient background colors.

How can I set the Gradient Background Color option in Jupiter X?

Like a solid background, you can find this option anywhere you need to set a background.  In customizer, the option to add gradient background is beside the solid color. When you switch from solid color to the gradient, the other options will show up and let you set a different kind of gradient here.

 

 

The gradient concept comes with two parameters: Gradient Start and Gradient Stop colors. Although you can set the color of the gradients, you can also set the transparency of each color. The Linear and Radial toggles let you choose between these two styles. And the Gradient Angle let you set a different angle of the gradient.

 

To add gradient background color through customizer:

1
From the WordPress left menu, go to Appearance > Customize.

2
From the customizer left dashboard, go to Layout.
3
In the layout popup, go to Styles tab > Page.
4
Add your custom gradient background color.
5
Close the popup and Publish the changes.

Background Image

The background image option sets a background image for an element. By default, a background image is placed at the top-left corner of an element and repeated both vertically and horizontally. The background of an element is the total size of the element, including padding and border (but not the margin).

With customizer, you have full control over the background images, but it’s up to you to choose the perfect background image for your content to make sure it has the best look. Here you can find some tips on how to choose a perfect background image for your content.

Where can I see the Background Image option in Jupiter X?

It’s available everywhere you need to set a background. In customizer, the option to add background image will look like this:

Each background image comes with a couple of settings such as Position, Repeat, Fixed, and Cover.

  • The Position options represent where the background image should start. The top-left position sticks the top-left corner of the image to the top-left corner of its container. The center-center position will show the image form the middle and so on.
  • The Repeat option represents how the image should repeat (vertically, horizontally, both vertically and horizontally or None). If you set the Cover image to be on, it doesn’t matter if you want to repeat the image or not, it is just cover up the whole area.
  • The Fixed option will let you choose whether you want the background image to have fixed position while you are scrolling or not.
  • The Cover option will let you choose whether the image should cover the whole container or not.

To add background image through customizer:

1
From the WordPress left menu, go to Appearance > Customize.

2
From the customizer left dashboard, go to Layout.
3
In the layout popup, go to Styles tab > Page.
4
Add your custom background image.
5
Close the popup and Publish the changes.
Rather than this, we also have Page level background options which will be explained in the Page Settings article here.
Also, the Elementor page builder has Background settings for almost all of its elements. It is recommended to watch this video tutorial on how to set a background for your elements using Elementor.

How can I add video background?

In order to have a video or audio backgrounds, you need to use Elementor to add videos to the section backgrounds or use an Audio player with autoplay somewhere to play the audio in the background. Learn more in this article.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket