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…

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

  1. Go to Online Store > Themes > Customize
  2. Navigate to the page where you want to add the background
  3. Click Add section
  4. Select Dynamic Background
  5. 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