Background Settings Overview

How to change background color

There are 2 options: solid color and gradient.

Solid Color Background

A solid color background is a single, uniform color applied to an element.

Solid Color Settings in GemPages:

• Hex Color Code: Input the exact hexadecimal code for precision. This is useful for maintaining consistent branding.
• Eyedropper: Click the pen icon to visually pick any color from your page.

If you want to change the background color for the whole page, check out this article.

Gradient Background

A gradient background in GemPages is a smooth transition between two colors, achieved with a linear gradient. 

Gradient Settings in GemPages:

• Gradient slider: Set up gradient transition in terms of color, number of colors, and position of colors.
• Gradient direction: Set up the gradient transition direction.
• Recent color: Display the recently chosen colors.
• Suggested color: Display the colors suggested by GemPages.

How to add image background

Image Background Settings in GemPages:

GemPages allows you to control several image background properties:

• Scale: Choose between Cover to fill the area completely or Contain to ensure the entire image is visible without cropping.
• Position: Align the image to specific areas, such as the center, top-left, or bottom-right.
• Repeat: Decide whether the image should be tiled horizontally, vertically, or not at all.
• Attachment: Set the image to either scroll with the content or remain fixed for a parallax effect.
• Optimize LCP: Automatically pre-load the banner when the user scrolls near the section containing it.

Read more about Set Image Background & Color to understand the process of setting an image background. 

How to add video background

Video backgrounds are an excellent way to grab attention and create an immersive experience for your visitors. Available in Video Banner and Hero Banner sections, they add motion and energy to your designs.

Please refer to this article for more information.

Video Background Settings in GemPages:

• Source: Choose source to getting video from. There are 2 sources to choose from:

YouTube: Add a video source from YouTube. Supports both Short and long YouTube videos.

Video hosting: Add a video source from another hosting.

• Video URL: Enter video URL that matches the source selected.
• Loop: Have the video restart from the beginning once it reaches the end.