Background Settings

Background Settings

Page backgrounds can be set through the CssBaseline editor.

Access Path

1. Open VertiTab settings page
2. Click “Custom Themes” in the sidebar menu
3. Select the theme to edit and click “Edit”
4. Click the ”🧩 Component Customization” tab
5. Find the “CssBaseline” configuration card and expand it
6. In the “Body Element Styles” section, find “Body Background”

Background Picker Features

Background Types

Solid Color Background

• Click the color picker icon to open the background selector
• Select colors in the “Solid Color” tab
• Supports palette selection and custom color input
• Real-time preview of selection effects

Gradient Background

• Switch to the “Gradient” tab
• Configure gradient direction and colors
• Supports linear and radial gradients
• Can add multiple gradient color stops

Image Background

• Switch to the “Image” tab
• Supports uploading local images or entering image links
• Can set image display modes (cover, contain, repeat, etc.)
• Supports position adjustment

Operation Interface

Background Preview Area

• Displays a small square showing current background effect
• Shows transparent grid pattern when background is empty
• Click to open background selector

Background Value Display

• Shows current background CSS value
• Long values are automatically truncated with ellipsis
• Shows placeholder prompt text when background is empty

Action Buttons

• Palette Icon: Opens background selector
• Clear Button: Clears current background setting
• Close Button: Closes selector panel

Operation Steps

Setting Solid Color Background

1. Click background preview area or palette icon
2. Ensure you’re on the “Solid Color” tab
3. Select your preferred color in the color picker
4. Color automatically applies to preview area

Setting Gradient Background

1. Open background selector
2. Switch to “Gradient” tab
3. Select gradient type and direction
4. Set start and end colors
5. Can add intermediate color stops for more complex gradients

Setting Image Background

1. Open background selector
2. Switch to “Image” tab
3. Upload image file or enter image URL
4. Adjust image display mode and position
5. Preview effects and confirm

Clearing Background

1. Open background selector
2. Click “Clear” button
3. Or select transparent color in solid color mode

Background Effects

Application Scope

• Entire Page Background: Affects background display of all interfaces
• Theme Consistency: Coordinates with color schemes and other components
• Visual Hierarchy: Provides visual foundation for the interface

CSS Properties

Background settings apply to the body element’s background property, supporting:

• Solid colors: #ffffff, rgb(255,255,255), rgba(255,255,255,0.8)
• Gradients: linear-gradient(...), radial-gradient(...)
• Images: url(...) with related properties

Usage Recommendations

Background Selection Principles

1. Coordinate with Theme: Background should match overall color scheme
2. Avoid Interference: Should not affect readability of text and interface elements
3. Performance Consideration: Large images may impact loading performance
4. User Experience: Background should enhance rather than interfere with user operations

Recommendations by Type

• Solid Color Background: Clean, good performance, suitable for most scenarios
• Gradient Background: Modern feel, suitable for users pursuing visual effects
• Image Background: Highly personalized, but pay attention to contrast and performance

Common Issues to Avoid

1. Insufficient Contrast: Dark backgrounds with light text, light backgrounds with dark text
2. Overly Complex Images: Avoid background images with too many details that affect reading
3. Color Conflicts: Ensure background coordinates harmoniously with theme colors

Saving Settings

All background settings are previewed in real-time. Click the “Save” button in the theme editor to save changes. When clearing background, the theme default background will be used.