Custom Background Image Width

What You'll Create

Create custom control over section background image sizing and positioning in Squarespace. Resize background images to partial widths, position them left or right, and layer them behind or beside your content for sophisticated split layouts.

The Problem It Solves

Squarespace background images always fill the entire section by default. There's no built-in control to make a background image only cover half the section, or position it to one side. This technique unlocks precise control over background image dimensions and placement.

Perfect For

Split-screen layouts, Text with partial image backgrounds, Asymmetric designs, Creative hero sections, Product feature sections.

What Makes This Different

The styling targets the section's background elements directly, adjusting width percentages and stacking order. Content remains positioned above the background through layering control, while the background image can be sized to any percentage of the section. The technique includes smart section selectors for applying styles based on content alignment.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Section with background image uploaded

• Toolkit Title: Manage Background Image Width

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support