General

How do I change the background color of a specific section in Squarespace?

Each section in Squarespace 7.1 has a unique data-section-id attribute. Use this as a CSS attribute selector to change the background color of just that section.

Find the section ID by inspecting the section element in your browser's developer tools. It's a long alphanumeric string on the section's wrapper div.

/* Target specific section */
[data-section-id="6501abc123def456"] {
  background-color: #f8f9fa !important;
}

/* With a gradient background */
[data-section-id="6501abc123def456"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Override text colors in that section */
[data-section-id="6501abc123def456"] h1,
[data-section-id="6501abc123def456"] h2,
[data-section-id="6501abc123def456"] p {
  color: #ffffff !important;
}

Create section gradients with our Gradient GeneratorTry it free →

Related Questions

How do I find the CSS selector for any element in Squarespace?

How do I hide a specific element by its ID in Squarespace?

How do I add a back-to-top button in Squarespace?

How do I add a scroll progress bar to Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Talk to Long Drive Marketing →