Dynamic Background Section
For Plain Jane, and Plain Jane Interactive
What You'll Learn
How to add and configure dynamic background sections
Advanced background options including videos, images, and overlays
Mobile optimization and responsive background settings
Animation and transition effects
🎯 What is the Dynamic Background Section?
The Dynamic Background Section is a powerful, flexible background system in Plain Jane v3.1 that allows you to create immersive page backgrounds with advanced customization options. Unlike static backgrounds, this section supports video backgrounds, image overlays, gradients, and responsive mobile configurations.
Key Features:
Video background support with fallback images
Gradient overlays with opacity controls
Separate mobile and desktop configurations
Animation and transition effects
Multiple background sizing and positioning options
Performance-optimized loading
Available in:
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 How to Add Dynamic Background Section
Go to Online Store > Themes > Customize
Navigate to the page where you want to add the background
Click Add section
Select Dynamic Background
Configure the background settings in the sidebar
💡 Note: This section is often used on homepages, landing pages, and special promotional pages.
🖼️ Background Configuration Options
Background Style
Color Background
Solid color background option
Choose any hex color value
Separate desktop and mobile color settings
Ideal for minimalist designs
Image Background
Upload custom background images
Support for high-resolution images
Multiple sizing and positioning options
Automatic optimization for web
Video Background
Upload MP4 video files for dynamic backgrounds
Automatic fallback to image on mobile (for performance)
Looping and autoplay controls
Optimized for performance and data usage
Desktop Background Settings
Background Color
Primary background color for desktop
Default:
#ffffff(white)Used as fallback when images/videos don't load
Background Image
Upload desktop-specific background image
Recommended minimum size: 1920x1080px
Supports JPG, PNG, WebP formats
Background Video
Upload background video for desktop
MP4 format recommended
Keep file size under 10MB for optimal performance
Automatic loop and mute settings
Mobile Background Settings
Mobile Background Color
Separate color setting for mobile devices
Often different from desktop for better mobile experience
Optimized for smaller screens
Mobile Background Image
Mobile-specific background image
Recommended size: 800x1200px (portrait orientation)
Automatically replaces video backgrounds on mobile
Show Background Image on Mobile
Toggle to enable/disable images on mobile
Improves performance on slower connections
Uses color background as fallback
🎨 Overlay and Gradient Effects
Top Overlay
Overlay Top Color
Gradient overlay color at the top of the background
Creates depth and improves text readability
Separate settings for desktop and mobile
Overlay Top Opacity
Control transparency of top overlay (0-100%)
Desktop: Adjustable opacity for design flexibility
Mobile: Separate opacity control for mobile optimization
Bottom Overlay
Overlay Bottom Color
Gradient overlay color at the bottom
Creates smooth color transitions
Enhances visual hierarchy
Overlay Bottom Opacity
Control bottom overlay transparency
Independent desktop and mobile settings
Allows for subtle or dramatic effects
📱 Mobile Optimization
Responsive Behavior
Automatic Mobile Switching
Videos automatically switch to images on mobile
Optimized for mobile data usage
Maintains visual consistency across devices
Mobile-Specific Settings
Separate color, image, and overlay settings
Optimized file sizes for mobile viewing
Touch-friendly interaction considerations
Performance Optimization
Lazy loading for background images
Compressed video files for faster loading
Automatic format selection based on browser support
⚙️ Advanced Customization
Background Sizing
Cover (Default)
Scales background to cover entire area
May crop parts of image/video
Best for full-screen effects
Contain
Scales to fit within container
Shows entire image/video
May leave empty space
Auto
Uses natural size of background media
No scaling applied
Best for specific design requirements
Background Position
Center (Default)
Centers background in available space
Balanced composition
Top/Bottom Alignment
Align to top or bottom of container
Useful for specific focal points
Left/Right Alignment
Horizontal positioning control
Creative layout possibilities
🚀 Best Practices
Performance Optimization
Video Backgrounds
Keep video files under 10MB
Use H.264 encoding for best compatibility
Provide high-quality poster images as fallbacks
Test on various connection speeds
Image Optimization
Compress images without quality loss
Use WebP format when possible
Provide appropriate sizes for desktop and mobile
Consider file size impact on loading times
Design Considerations
Content Readability
Use overlays to ensure text remains readable
Test contrast ratios for accessibility
Consider different device viewing conditions
Provide fallback colors for failed loads
Mobile Experience
Prioritize mobile performance over visual effects
Test on actual mobile devices with slower connections
Consider data usage implications for users
Provide meaningful fallbacks
Accessibility
Motion Sensitivity
Provide options to disable video backgrounds
Respect user's motion preferences
Use subtle animations when possible
Test with accessibility tools
Color Contrast
Ensure sufficient contrast for text readability
Test with various background combinations
Consider colorblind users
Use overlay gradients strategically
🔧 Troubleshooting
Common Issues
Video Not Playing
Check video file format (MP4 recommended)
Verify file size is under limits
Ensure proper encoding settings
Test across different browsers
Poor Mobile Performance
Reduce image file sizes
Enable mobile background optimizations
Test on actual mobile devices
Consider disabling video on mobile
Loading Issues
Optimize image and video file sizes
Check internet connection requirements
Verify file formats are supported
Test with different browser caching settings
Browser Compatibility
Video Support
Modern browsers: Full support
Older browsers: Fallback to images
Mobile browsers: Image replacement for performance
Image Formats
WebP: Best compression, modern browser support
JPEG: Universal compatibility
PNG: Best for graphics with transparency
Last updated