Displaying a background image on your site creates visual impact and character. Here's how to add and customize background images in Squarespace 7.0.

Supported Templates

Background images work with these template families:

• Adirondack
• Avenue
• Aviator
• Five
• Forte
• Momentum
• Montauk
• Native

Best Practices

• Use images between 1500-2500 pixels wide
• Choose images that work well when cropped differently on mobile
• Use abstract patterns or borderless images for optimal results
• Note that background images don't transfer between templates

Adding a Background Image

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

Customization Options

Size Settings:

• Auto: Maintains original dimensions
• Cover: Fills entire background
• Contain: Fits longest side to browser

Position Options:

• Top (left/center/right)
• Center (left/center/right)
• Bottom (left/center/right)

Repeat Settings:

• No repeat
• Repeat
• Repeat-X (horizontal)
• Repeat-Y (vertical)

Mobile Optimization

• Test on mobile devices after making changes
• Use Size: Contain or Auto for better mobile display
• Keep image dimensions under 2500 pixels
• Consider using Position options for better mobile layout

Troubleshooting

For distorted images:

• Enable Fixed Position
• Use Size: Contain or Auto
• Adjust Position settings

For blurry images:

• Use recommended image dimensions
• Avoid stretching beyond original size

Page-Specific Backgrounds

Alternative options include:

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

Remember to check your background image display across different devices and page types to ensure consistent appearance.

Related Articles

Previous Articles