> ## Documentation Index
> Fetch the complete documentation index at: https://help.coachiq.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Backgrounds and Section Styling

> Learn how to customize section backgrounds, spacing, and width in CoachIQ's Website Builder. Style your coaching website sections for maximum impact.

<Info>
  **Where to find this**: Dashboard → Website Builder → Select any page → Click on any section
</Info>

## What you'll accomplish

Learn how to customize the visual appearance of your website sections using background settings, spacing controls, and width options to create a professional look for your coaching website.

<Frame>
  <img src="https://mintcdn.com/coachiq/sznzqsH_u7Le7Lgr/images/background-settings-full-page.png?fit=max&auto=format&n=sznzqsH_u7Le7Lgr&q=85&s=0affd694283b224af74609d83291aa38" alt="CoachIQ Website Builder section styling panel with background and spacing options" width="3998" height="2188" data-path="images/background-settings-full-page.png" />
</Frame>

## Section background settings

<Steps>
  <Step title="Select the section to style">
    Click on the section you want to customize in your Website Builder sidebar.
  </Step>

  <Step title="Access background options">
    In the section settings panel, locate the **Background** controls under **Change Section Styles**.

    <Frame>
      <img src="https://mintcdn.com/coachiq/VvFKWphQeIQlKZTz/images/background-toggle.png?fit=max&auto=format&n=VvFKWphQeIQlKZTz&q=85&s=375a9aa4c53bb63a3c3049a85a0f9355" alt="Background Toggle" width="822" height="942" data-path="images/background-toggle.png" />
    </Frame>
  </Step>

  <Step title="Choose your background type">
    Select from the available background options:

    * **Solid color**: Choose a color that matches your brand
    * **Background image**: Upload an image that supports your content
    * **No background**: Keep the section transparent

    <Frame>
      <img src="https://mintcdn.com/coachiq/sznzqsH_u7Le7Lgr/images/background-settings.png?fit=max&auto=format&n=sznzqsH_u7Le7Lgr&q=85&s=e6fe02cdb022e2c92a0e336e6f8a444e" alt="CoachIQ section background options showing color, image, and no background choices" width="796" height="858" data-path="images/background-settings.png" />
    </Frame>

    <Tip>
      **Brand consistency**: Use colors from your brand palette to maintain a professional appearance across all sections.
    </Tip>
  </Step>

  <Step title="Preview your changes">
    Your background changes will appear immediately in the preview area.

    <Check>
      Your section now displays your chosen background styling.
    </Check>
  </Step>
</Steps>

## Adjusting section spacing

Control how much space your sections take up on the page using the vertical padding controls.

<Steps>
  <Step title="Locate the Vertical Padding control">
    In your selected section's settings panel under **Change Section Styles**, find the **Vertical Padding** slider.
  </Step>

  <Step title="Adjust the spacing">
    Move the slider to increase or decrease the amount of space above and below your section content.

    * **Less padding**: Creates tighter, more compact sections
    * **More padding**: Provides breathing room and emphasizes content

    <Note>
      Vertical padding affects the space inside the section, not the space between sections.
    </Note>
  </Step>

  <Step title="Check mobile appearance">
    Preview how your padding adjustments look on mobile devices to ensure good user experience.

    <Check>
      Your section now has the optimal amount of spacing for your content.
    </Check>
  </Step>
</Steps>

## Setting section width

Control how wide your section content appears on the page.

<Steps>
  <Step title="Find the Width controls">
    Look for the **Width (Default)** setting in your section panel under **Change Section Styles**.
  </Step>

  <Step title="Choose your width option">
    Select the width that works best for your content:

    * **Default width**: Standard container width that works for most content
    * **Custom width**: Adjust the slider to make sections wider or narrower
    * **Full width**: Extends content across the entire browser window

    <Tip>
      **Content consideration**: Text-heavy sections often work better with default or narrower widths for better readability.
    </Tip>
  </Step>

  <Step title="Preview across devices">
    Check how your width settings look on desktop, tablet, and mobile views.

    <Check>
      Your section content now displays at your preferred width.
    </Check>
  </Step>
</Steps>

## Common questions

<AccordionGroup>
  <Accordion title="Why isn't my background image showing up?">
    Check that your image file is in a supported format (JPG, PNG, WebP) and isn't too large. Also ensure the image has been properly uploaded to your media library.
  </Accordion>

  <Accordion title="How do I make sections look consistent across my site?">
    Use the same background colors, similar padding amounts, and consistent width settings across sections of the same type. Create a style guide for your brand colors and stick to it.
  </Accordion>

  <Accordion title="Can I use different backgrounds for desktop and mobile?">
    Background settings apply to both desktop and mobile. However, you can preview how backgrounds look on different devices and adjust accordingly.
  </Accordion>
</AccordionGroup>

## Pro tips

<Tip>
  **Visual hierarchy**: Use different background colors or padding to create visual separation between different types of content sections.
</Tip>

<Tip>
  **Image optimization**: When using background images, choose high-quality images that don't interfere with text readability. Consider adding a dark overlay for sections with white text.
</Tip>

<Tip>
  **Consistent spacing**: Use similar padding amounts for sections of the same importance level to create a cohesive look throughout your site.
</Tip>

<Tip>
  **Test thoroughly**: Always preview your styling changes on both desktop and mobile devices before publishing your site.
</Tip>

## Related articles

* [Adding and Managing Sections](/website/sections/working-with-sections) - Learn the basics of section management
* [Editing Section Content](/website/sections/working-with-sections) - Customize the text, images, and content within sections
* [Buttons and Call-to-Actions](/website/sections/buttons-ctas) - Style buttons within your sections