# Contact Background Section > **What You'll Learn** > > * How to create immersive contact page backgrounds with video, images, and color overlays > * Advanced configuration options for desktop and mobile background customization > * How to set up gradient overlays and opacity controls for professional contact aesthetics > * Best practices for contact page background optimization and user experience *** ## 🎯 What is the Contact Background Section? The **Contact Background Section** is a comprehensive background system designed specifically for contact pages that enables the creation of immersive, visually engaging contact environments. This section provides advanced options for video backgrounds, separate desktop and mobile image backgrounds, color overlays, and gradient effects to create professional contact page presentations that enhance user engagement while maintaining form functionality and accessibility. **Key Features:** * **Video Backgrounds**: Auto-playing video backgrounds with mobile optimization and battery awareness * **Separate Desktop/Mobile Images**: Independent background images optimized for different devices * **Gradient Overlays**: Customizable top-to-bottom gradient overlays with separate opacity controls * **Color Backgrounds**: Solid color backgrounds with separate desktop/mobile options * **Advanced Overlay System**: Professional overlay effects for form readability and contact information visibility * **Performance Optimized**: Efficient loading and mobile battery considerations * **Form Integration**: Backgrounds designed to work seamlessly with contact forms and content Available in: * βœ… Plain Jane v3.1+ * βœ… Plain Jane Interactive v2+ > πŸ’‘ **Note**: This section is optimized for contact template pages and provides sophisticated background options specifically designed for contact form environments and business communication needs. *** ## πŸ”§ How to Add Contact Background Section 1. Go to **Online Store > Themes > Customize** 2. Navigate to **Pages > Contact** or create a contact template page 3. Click **Add section** 4. Select **Background** section 5. Configure background type (video, image, or color) 6. Set up overlay options and responsive settings 7. Position the section as the first element for full-page coverage > ⚠️ **Important**: This section works best when added as the first section on contact template pages to create full-page background effects that support contact forms and business information. *** ## 🎬 Video Background Options ### **Video Background Setup** **Video Configuration** * **Background Video URL**: Direct link to MP4 video file optimized for contact pages * **Show Background Video**: Toggle to enable/disable video background * **Auto-play**: Automatic video playback on page load * **Muted**: Videos start muted for better user experience and form focus * **Loop**: Continuous video playback for seamless background effect **Contact Page Video Features** * **Professional Appearance**: Creates sophisticated business presentation * **Form Compatibility**: Video backgrounds don't interfere with contact form functionality * **Mobile Optimization**: Special handling for mobile devices and battery modes * **Performance Optimized**: Efficient video loading and playback for contact pages * **Context Menu Disabled**: Prevents right-click on video for cleaner contact experience ### **Mobile Video Considerations** **Battery Mode Compatibility** * Automatic fallback when iPhone Low Battery Mode is enabled * Follows Apple's guidelines for video autoplay restrictions * Graceful degradation to image or color backgrounds on mobile * Option to show background images on mobile instead of video **Contact Page Mobile Performance** * Optimized video compression for mobile bandwidth during contact sessions * Efficient loading strategies for cellular connections * Touch-friendly contact form interactions over video backgrounds * Battery-conscious playback options for extended contact page visits *** ## πŸ–ΌοΈ Image Background System ### **Desktop Image Backgrounds** **Desktop Configuration** * **Desktop Background Image**: High-resolution image picker for desktop contact displays * **Show On Desktop**: Toggle to enable/disable desktop image background * **Automatic Scaling**: Images scale to cover full screen while maintaining aspect ratio * **Professional Quality**: Support for high-resolution business imagery for crisp contact display **Business Image Optimization** * **Professional Imagery**: Master quality images for sharp business presentation * **Responsive Scaling**: Automatic adjustment for different desktop screen sizes * **Loading Optimization**: Efficient image loading for fast contact page display * **Visual Consistency**: Consistent business appearance across different desktop resolutions ### **Mobile Image Backgrounds** **Mobile-Specific Contact Images** * **Mobile Background Image**: Separate image picker optimized for mobile contact experiences * **Show On Mobile**: Independent toggle for mobile image display * **Mobile Optimization**: Images optimized for mobile screen dimensions and contact form usability * **Portrait/Landscape Support**: Automatic adaptation for device orientation during contact sessions **Mobile Contact Performance Features** * **Bandwidth Optimization**: Compressed images for faster mobile loading during contact * **Touch-Friendly**: Optimized for touch interactions with contact forms * **Battery Efficiency**: Reduced processing overhead for better battery life during contact sessions * **Network Awareness**: Efficient loading for various mobile connection speeds *** ## 🎨 Color Background System ### **Solid Color Backgrounds** **Desktop Color Configuration** * **Desktop Background Color**: Custom color picker for desktop contact displays * **Hex Color Support**: Full hex color and theme color compatibility * **Business Integration**: Easy coordination with business brand color schemes * **High Contrast Options**: Support for accessibility-friendly color choices for contact forms **Mobile Color Configuration** * **Mobile Background Color**: Independent color selection for mobile contact devices * **Responsive Color Strategy**: Different colors for different contact device contexts * **Mobile-Optimized Colors**: Colors chosen specifically for mobile contact form readability * **Consistent Branding**: Maintain business identity across contact device types ### **Business Color Strategy** **Professional Color Selection** * **Brand Coordination**: Colors that align with overall business brand aesthetic * **Contact Readability**: Background colors that enhance contact form and information readability * **Accessibility Compliance**: High contrast options for accessibility standards in business contact * **Visual Hierarchy**: Colors that support contact information organization and hierarchy *** ## 🌈 Advanced Overlay System ### **Gradient Overlay Configuration** **Desktop Overlay Options** * **Overlay Top Color**: Color for the top of contact page gradient overlay * **Overlay Bottom Color**: Color for the bottom of contact page gradient overlay * **Top Opacity**: Adjustable transparency (0-1) for top overlay color * **Bottom Opacity**: Adjustable transparency (0-1) for bottom overlay color * **180-degree Gradient**: Smooth top-to-bottom gradient transition for professional contact appearance **Mobile Overlay Options** * **Mobile Top Color**: Independent top color for mobile contact gradient * **Mobile Bottom Color**: Independent bottom color for mobile contact gradient * **Mobile Top Opacity**: Separate opacity control for mobile top contact overlay * **Mobile Bottom Opacity**: Separate opacity control for mobile bottom contact overlay ### **Contact Page Overlay Effects** **Professional Contact Applications** * **Form Readability**: Overlays improve contact form readability over complex backgrounds * **Business Integration**: Colored overlays reinforce business brand color schemes * **Visual Depth**: Gradient effects create professional visual depth for contact pages * **Contact Focus**: Overlays direct attention to contact form and business information areas **Contact Page Opacity Control Strategy** * **0.0**: No overlay effect (fully transparent) for direct background impact * **0.1-0.3**: Subtle overlay for slight contact form enhancement * **0.4-0.6**: Moderate overlay for balanced background/contact form visibility * **0.7-1.0**: Strong overlay for maximum contact form focus and business information readability *** ## πŸ“± Responsive Design Features ### **Device-Specific Contact Optimization** **Desktop Contact Experience** * **High-Resolution Support**: Full support for 4K and high-DPI business displays * **Video Performance**: Optimized video playback for desktop business hardware * **Large Image Support**: High-quality background images for large business screens * **Desktop-Specific Colors**: Colors optimized for desktop business viewing conditions **Mobile Contact Experience** * **Touch Optimization**: Backgrounds optimized for touch contact form interactions * **Battery Conservation**: Efficient rendering for mobile battery life during contact sessions * **Bandwidth Awareness**: Optimized assets for mobile data connections during contact * **Orientation Support**: Automatic adaptation for portrait/landscape contact modes ### **Cross-Device Contact Consistency** **Business Brand Consistency** * **Visual Continuity**: Consistent business experience across all contact devices * **Color Coordination**: Coordinated color schemes for desktop and mobile contact * **Professional Appearance**: Maintains business quality on all contact screen sizes * **User Experience**: Seamless contact experience regardless of device type *** ## πŸ”„ Background Type Combinations for Contact Pages ### **Video + Overlay Strategy for Business Contact** **Professional Video Contact Backgrounds** * Use video backgrounds for dynamic, engaging business contact environments * Apply subtle overlays (0.2-0.4 opacity) to ensure contact form readability * Choose business-appropriate overlay colors for professional consistency * Test video performance across different devices and business connections ### **Image + Gradient Strategy for Business Contact** **Sophisticated Image Contact Backgrounds** * Use high-quality business images that complement contact functionality * Apply gradient overlays to create professional contact reading environments * Choose separate desktop/mobile images for optimal business device experience * Coordinate gradient colors with overall business contact design ### **Color + Mobile Image Strategy for Business Contact** **Performance-Optimized Contact Approach** * Use solid business colors for fast-loading desktop contact experience * Implement optimized images for mobile business contact visual impact * Apply consistent overlay strategies across both contact approaches * Balance business visual appeal with contact loading performance *** ## πŸŽ›οΈ Advanced Configuration for Business Contact ### **Professional Contact Setup Strategy** **Business-First Approach** * **Form Priority**: Choose backgrounds that enhance rather than compete with contact forms * **Brand Integration**: Coordinate all background elements with business brand identity * **Performance Balance**: Balance business visual impact with contact loading speed * **User Experience**: Prioritize contact user experience over visual complexity **Contact Visual Hierarchy** * **Background Role**: Backgrounds should support, not overwhelm contact forms and business information * **Color Psychology**: Use colors that support business communication mood and brand message * **Overlay Strategy**: Use overlays to create clear contact form focus areas * **Responsive Consideration**: Ensure background works across all business contact device types ### **Contact Performance Optimization** **Loading Strategy for Business Contact** * **Image Optimization**: Use appropriately sized images for each business contact device type * **Video Compression**: Choose video files optimized for business web delivery * **Progressive Loading**: Implement backgrounds that load efficiently for contact * **Fallback Options**: Provide color fallbacks for slow business connections **Mobile Contact Optimization** * **Battery Awareness**: Consider mobile battery impact when choosing contact background types * **Bandwidth Consideration**: Optimize for various mobile connection speeds during contact * **Performance Monitoring**: Test background performance on actual mobile contact devices * **User Experience**: Prioritize mobile contact user experience in background choices *** ## πŸ”§ Troubleshooting Contact Backgrounds ### **Video Background Issues in Contact** **Common Contact Video Problems** * Video not auto-playing on mobile contact devices * Video backgrounds causing contact form performance issues * Video not loading or displaying properly on contact pages * Audio playing despite muted setting during contact **Contact Video Solutions** * Verify video URL is direct link to MP4 file * Check mobile device Low Battery Mode settings for contact users * Test video file size and compression for business web delivery * Ensure video files are properly formatted for contact web playback * Verify "Show Background Video" toggle is enabled ### **Image Background Problems in Contact** **Potential Contact Image Issues** * Images not displaying on specific contact devices * Image quality appears pixelated or blurry on contact pages * Images not covering full contact background area * Different images not switching properly between contact devices **Contact Image Solutions** * Upload high-resolution images appropriate for contact screen sizes * Verify "Show On Desktop" and "Show On Mobile" contact settings * Check image file formats are web-compatible for contact (JPG, PNG) * Test contact background display on actual devices * Ensure image files are properly uploaded and saved for contact ### **Overlay Configuration Issues in Contact** **Common Contact Overlay Problems** * Overlays too strong, making contact forms unreadable * Overlays not displaying correctly on contact pages * Different overlay colors between desktop and mobile contact * Gradient effects not appearing smooth on contact backgrounds **Contact Overlay Solutions** * Adjust opacity settings for better contact form visibility * Test overlay combinations for optimal contact readability * Verify overlay colors are properly configured for each contact device * Check browser compatibility for contact gradient effects * Clear browser cache after making contact overlay changes ### **Performance Problems in Contact** **Potential Contact Performance Issues** * Contact pages loading slowly with background elements * Video backgrounds causing browser lag during contact * Mobile performance issues with contact background images * Background elements not loading on slow contact connections **Contact Performance Solutions** * Optimize video file sizes for business web delivery * Compress contact background images without quality loss * Test contact loading speed on various connection types * Consider simpler background options for performance-critical contact situations * Monitor mobile performance and battery impact during contact *** ## πŸ“Š Performance Impact for Business Contact ### **Loading Efficiency for Contact Pages** **Optimized Contact Performance** * **Efficient Asset Loading**: Optimized loading strategies for different contact background types * **Device-Specific Optimization**: Separate assets for optimal contact device performance * **Progressive Enhancement**: Graceful degradation for slower business connections * **Battery Consideration**: Mobile-optimized approaches for battery conservation during contact **SEO Considerations for Business Contact** * **Loading Speed**: Fast-loading contact backgrounds support business SEO rankings * **Mobile Performance**: Mobile contact optimization directly impacts search rankings * **User Experience**: Better contact performance leads to better business engagement metrics * **Accessibility**: Properly configured contact backgrounds support accessibility standards *** ## 🎯 Best Practices Summary for Business Contact ### **Setup Checklist for Contact Backgrounds** ``` βœ… Choose contact background type appropriate for business content and brand βœ… Upload high-quality images optimized for business web delivery βœ… Configure separate desktop and mobile contact background options βœ… Set up overlay colors and opacity for optimal contact form readability βœ… Test video backgrounds on multiple contact devices and connection speeds βœ… Verify mobile performance and battery impact during contact sessions βœ… Check contact background display across different browsers βœ… Test accessibility and readability with contact background elements βœ… Optimize asset sizes for fast contact loading βœ… Configure fallback options for slow business connections βœ… Test responsive behavior across contact device sizes βœ… Verify brand consistency across all contact background options ``` ### **Contact Strategy for Business** **Visual Coordination for Business Contact** * **Brand Alignment**: Ensure all contact background elements support business brand identity * **Form Readability**: Prioritize contact form visibility over visual complexity * **User Experience**: Choose contact backgrounds that enhance rather than distract * **Performance Balance**: Balance business visual impact with contact loading performance **Professional Implementation for Contact** * **Quality Standards**: Use high-quality assets appropriate for professional business contact * **Consistency**: Maintain visual consistency across all business contact pages * **Accessibility**: Ensure contact backgrounds meet accessibility standards * **Mobile Experience**: Optimize specifically for mobile business contact *** ## πŸš€ Advanced Use Cases for Business Contact ### **Professional Service Contact** **Business Contact Backgrounds** * Use sophisticated image backgrounds with subtle overlays for professional appearance * Implement gradient effects for business editorial contact appearance * Choose colors that complement business communication goals * Create immersive contact environments for business relationship building ### **Brand-Focused Business Contact** **Brand-Integrated Contact Backgrounds** * Use brand colors in overlay systems for consistent business identity * Implement brand imagery in contact background selections * Create cohesive visual experience with other business brand touchpoints * Balance brand expression with contact form readability and functionality ### **Service-Oriented Business Contact** **Performance-Optimized Contact Backgrounds** * Prioritize fast-loading color backgrounds for contact form focus * Use minimal overlay effects to reduce contact visual complexity * Implement efficient loading strategies for contact-first business experience * Choose backgrounds that support sustained business contact experiences *** The Contact Background Section provides sophisticated background capabilities that transform basic contact pages into immersive, professional business environments with extensive customization options for video, images, colors, and overlay effects specifically designed for business communication and contact form optimization. ### **Need Help?** * πŸ’¬ **Join our community on Discord:** * πŸ“§ **Email us at:** * πŸ’» **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.openspaces.design/readme-1/sections-and-features/contact-background-section.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.