Background Settings Overview

Background settings play a crucial role in defining the visual identity and overall aesthetic of your website. Whether you opt for a solid color, gradient, image, or video background, each option offers unique ways to enhance the design and engage visitors. 

Color Background

There are 2 options: solid color and gradient.

Solid Color Background

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

It’s perfect for achieving a clean, minimalist look that emphasizes your content and branding. Solid colors reduce visual clutter, making your designs feel polished and professional.

Solid Color Settings in GemPages:

• Hex Color Code: Input the exact hexadecimal code for precision. This is useful for maintaining consistent branding.
• Color Picker: Allows you to select a color visually, offering flexibility for experimentation and design adjustments.

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. 

This setting adds depth and visual interest to your design, making sections dynamic and modern.

Gradient Settings in GemPages:

• Hex Color Codes: Define start and end colors for the gradient.
• Color Picker: Adjust the gradient’s color scheme visually.
• Additional Options: Gradient angle, and color intensity to fine-tune the effect.

Image Background

Background images add personality and context to your website, making it more engaging. They are an excellent way to introduce textures, branding elements, or themes that resonate with your audience.

Image Background Options 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.

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

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:

• Size: Adjust the size of the video to fit the desired section or area.
• Shape: Modify the shape of the video background by applying rounded corners, borders, or other styling effects to align with your design.
• Overlay: Add a color overlay with adjustable transparency to enhance text readability or match your branding theme.
• Zoom on Hover: Enable a zoom effect to create an interactive and engaging experience when users hover over the video.

Background Layers Explained

Backgrounds in GemPages are organized into layers, with each type of background stacking on top of the other:

1. Base Layer: The bottom layer is the background color, which serves as the foundation for the design.
2. Middle Layer: On top of the color is the background image or gradient, adding more depth and visual interest.
3. Top Layer: The highest layer is the background video, which takes priority over both the color and image/gradient layers.

If you set all three—background color, image/gradient, and video—the video will always display because it sits on the topmost layer. This hierarchy ensures that your most dynamic background option is visible.