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.
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.
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.
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.
