Background images provide a strong visual impact by displaying behind your site's content. Here's how to add and customize them in Squarespace 7.0:

Supported Templates:

• Adirondack
• Avenue
• Aviator (supports page-specific backgrounds)
• Five
• Forte
• Momentum
• Montauk
• Native

Best Practices for Background Images:

• Use images between 1,500-2,500 pixels wide
• Choose abstract patterns or images without text
• Consider mobile cropping variations
• Note that images won't transfer between templates

Adding a Background Image:

1. Open Design panel > Site Styles
2. Find Background Image, Site Background Image, or Page Background Image
3. Upload image or choose from existing files
4. Save changes

Image Style Options:

• Size: Auto (original size), Cover (full bleed), or Contain (fit to browser)
• Position: Top, Center, or Bottom combined with Left, Center, or Right
• Repeat: No-repeat, Repeat, Repeat-X, or Repeat-Y
• Fixed Position: Image stays static while content scrolls

Mobile Optimization Tips:

• Test on actual mobile devices
• Use Size: Contain or Auto to prevent distortion
• Keep images under 2,500 pixels
• Consider mobile-friendly image shapes

Examples:

Montauk Template:

Forte Template:

Native Template:

Aviator Template Example:

Page-Specific Background Options:

• Banner images
• Cover Pages
• Index Page Sections (Brine and Pacific families)

Troubleshooting:

• For blurry images: Use recommended image sizes
• For distortion: Adjust Size and Position settings
• For mobile issues: Test different Style options
• For loading issues: Reduce image size to 1,500 pixels

Remember to consider how background images interact with other site elements like headers, footers, and content areas for the best visual impact.

Related Articles

Previous Articles