# Setting the Background

The background is the foundation of your Interactive Space. This guide covers how to select, upload, and optimize background images for the best interactive experience.

## 🎨 Background Image Requirements

### Recommended Specifications

* **Resolution**: Minimum 1600x900px (16:9 aspect ratio)
* **File format**: JPG or PNG (WebP supported for faster loading)
* **File size**: Under 2MB for optimal performance
* **Quality**: High resolution for crisp display across devices

### Aspect Ratio Considerations

* **16:9 (1920x1080)**: Standard widescreen, works well on most devices
* **4:3 (1600x1200)**: More square format, good for product-focused scenes
* **21:9 (2560x1080)**: Ultra-wide, cinematic feel for lifestyle shots

## 📂 Uploading Your Background

### Step 1: Access Background Settings

1. **Open Theme Customizer**
   * Go to **Online Store → Themes**
   * Click **Customize** on Plain Jane Interactive
2. **Select Interactive Environment Section**
   * Click on your Interactive Environment section
   * Look for **Background** settings

### Step 2: Upload Image

1. **Select Image Source**
   * **Upload new**: Add image from your computer
   * **Choose existing**: Select from uploaded files
   * **Free images**: Browse Shopify's stock photos
2. **Image Optimization Tips**
   * Use high-quality source images
   * Compress before uploading (tools like TinyPNG)
   * Consider using WebP format for modern browsers

## 🔧 Background Display Settings

### Image Fit Options

#### Cover (Recommended)

* **Behavior**: Fills the entire container
* **Advantage**: No empty space, always full coverage
* **Consideration**: May crop parts of the image
* **Best for**: Lifestyle scenes, room settings

#### Contain

* **Behavior**: Shows the entire image within container
* **Advantage**: Never crops the image
* **Consideration**: May leave empty space around image
* **Best for**: Product photos with important details at edges

#### Fill

* **Behavior**: Stretches image to fit exactly
* **Advantage**: Perfect fit to container
* **Consideration**: May distort image proportions
* **Best for**: Abstract backgrounds, patterns

### Background Position

Control which part of the image is visible when cropping occurs:

* **Center**: Default, keeps main subject visible
* **Top**: Focus on upper portion of image
* **Bottom**: Emphasize lower section
* **Left/Right**: For images with off-center subjects

### Background Attachment

* **Scroll**: Background moves with page content (default)
* **Fixed**: Background stays in place while content scrolls
* **Local**: Background scrolls with element content

## 🎯 Choosing the Right Background

### Scene Types

#### Room Settings

**Perfect for**: Furniture, home decor, lighting

* Well-lit interior spaces
* Multiple surfaces for product placement
* Natural product context

**Tips**:

* Ensure good lighting throughout the scene
* Avoid overly busy or cluttered spaces
* Consider different room angles (corner vs. straight-on)

#### Lifestyle Contexts

**Perfect for**: Fashion, accessories, personal care

* People using or wearing products
* Natural environments
* Authentic situations

**Tips**:

* Include diverse models when possible
* Show products in realistic use cases
* Maintain focus on shoppable items

#### Product Showcases

**Perfect for**: Technical products, collections, new releases

* Clean, minimal backgrounds
* Focused product arrangements
* Professional styling

**Tips**:

* Use neutral backgrounds that don't compete
* Ensure high contrast between products and background
* Create visual hierarchy with lighting

### Color and Contrast Considerations

#### High Contrast Backgrounds

* **Advantages**: Interactive points stand out clearly
* **Best for**: Clean, minimal designs
* **Examples**: White studio backgrounds, dark dramatic scenes

#### Low Contrast Backgrounds

* **Advantages**: Subtle, sophisticated feel
* **Challenges**: Points may be harder to see
* **Solutions**: Use contrasting point colors, add subtle shadows

## 📱 Mobile Optimization

### Responsive Background Behavior

* **Automatic scaling**: Image adjusts to screen size
* **Focal point preservation**: Important areas stay visible
* **Performance optimization**: Smaller images for mobile devices

### Mobile-Specific Considerations

* **Simpler compositions**: Fewer elements work better on small screens
* **Larger products**: Ensure shoppable items are visible
* **Touch accessibility**: Leave space around interactive areas

### Alternative Mobile Backgrounds

Consider using different images for mobile:

* **Tighter crops**: Focus on key products
* **Vertical orientations**: Better for portrait screens
* **Simplified scenes**: Fewer distracting elements

## 🎨 Advanced Background Techniques

### Layered Backgrounds

Create depth with multiple image layers:

```css
.interactive-background {
  background-image: 
    url('foreground-layer.png'),
    url('main-background.jpg');
  background-position: 
    center center,
    center center;
}
```

### Animated Backgrounds

Subtle animations can enhance the experience:

* **Parallax scrolling**: Background moves at different speed
* **Subtle movements**: Gentle floating or swaying effects
* **Color transitions**: Gradual lighting changes

### Seasonal Variations

Update backgrounds for different seasons:

* **Holiday themes**: Festive decorations and colors
* **Seasonal products**: Summer outdoor vs. winter indoor scenes
* **Promotional periods**: Sale-specific styling

## 🔍 Testing and Optimization

### Performance Testing

* **Loading speed**: Monitor image load times
* **Mobile performance**: Test on various devices
* **Bandwidth usage**: Consider data-conscious users

### Visual Testing

* **Different screen sizes**: Tablet, mobile, desktop, large screens
* **Point visibility**: Ensure interactive elements stand out
* **Color accuracy**: Check across different monitors

### A/B Testing Ideas

* **Image styles**: Lifestyle vs. product-focused
* **Color schemes**: Warm vs. cool tones
* **Complexity levels**: Minimal vs. detailed backgrounds
* **Seasonal relevance**: Current vs. timeless imagery

## 🐛 Troubleshooting

### Common Issues

#### Image Not Loading

* **Check file size**: Ensure under platform limits
* **Verify format**: Use supported formats (JPG, PNG, WebP)
* **File permissions**: Confirm image is accessible

#### Poor Quality Display

* **Resolution**: Use higher resolution source images
* **Compression**: Balance file size vs. quality
* **Format optimization**: Consider WebP for better compression

#### Mobile Display Problems

* **Aspect ratio**: Test on various screen dimensions
* **Loading speed**: Optimize for mobile networks
* **Touch interactions**: Ensure points remain accessible

### Performance Issues

* **Slow loading**: Compress images, use modern formats
* **Memory usage**: Monitor for large file impacts
* **Bandwidth concerns**: Provide lower-resolution alternatives

## 💡 Creative Background Ideas

### Storytelling Backgrounds

* **Brand narrative**: Show company history or values
* **Customer journey**: Different life stages or use cases
* **Product evolution**: Before/after scenarios

### Interactive Environments

* **Virtual showrooms**: Recreate physical store layouts
* **Event spaces**: Trade show or popup shop environments
* **Customer spaces**: Real customer homes or workplaces

### Artistic Approaches

* **Illustrated backgrounds**: Custom artwork or graphics
* **Mixed media**: Combine photography with illustrations
* **Abstract compositions**: Artistic interpretations of brand themes

## 📊 Analytics and Insights

### Background Performance Metrics

* **Engagement rates**: Time spent on interactive sections
* **Click patterns**: Where users interact most
* **Conversion tracking**: Sales from different backgrounds
* **Device preferences**: Mobile vs. desktop engagement

### Optimization Based on Data

* **Heat mapping**: Identify most-clicked areas
* **Conversion analysis**: Which backgrounds drive sales
* **User feedback**: Survey customers about visual preferences
* **Seasonal performance**: Track background effectiveness over time


---

# 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/plain-jane-interactive/sections-and-features/setting-the-background.md?ask=<question>
```

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.