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

# Backgrounds: image files for funnels and websites

> Browse HoopAI's curated background image library to apply professional illustrations to your funnels and websites.

With the Backgrounds feature in Media Storage, you can explore and apply professionally designed background illustrations to elevate your site's design and reflect your brand's identity.

## Accessing backgrounds

<Steps>
  <Step title="Open Media Storage">
    Click **Media Storage** in the left navigation sidebar.
  </Step>

  <Step title="Select Backgrounds from the dropdown">
    In the filter dropdown menu, select **Backgrounds** to open the gallery of background options.

    <Frame caption="Backgrounds gallery showing available background illustrations">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/E5RqsVYHqu08Wwk2/images/media-storage-backgrounds-1.png?fit=max&auto=format&n=E5RqsVYHqu08Wwk2&q=85&s=83b5c6f4764c292d942e86708a68280b" alt="Select Backgrounds from the filter dropdown" width="1153" height="400" data-path="images/media-storage-backgrounds-1.png" />
    </Frame>
  </Step>

  <Step title="Browse and search">
    Use the search bar to find specific styles or scroll through the extensive collection of designs — ranging from soft pastels to vibrant, bold hues.

    <Frame caption="Backgrounds gallery with search and filter options">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/E5RqsVYHqu08Wwk2/images/media-storage-backgrounds-2.png?fit=max&auto=format&n=E5RqsVYHqu08Wwk2&q=85&s=fa334e604b55f5729466570c4ecb093a" alt="Browse the Backgrounds gallery" width="1156" height="618" data-path="images/media-storage-backgrounds-2.png" />
    </Frame>
  </Step>

  <Step title="Select a background">
    Click a background to add it to your media library or insert it directly into your page builder.
  </Step>
</Steps>

## Using backgrounds in the page builder

After selecting a background, you can apply it to any section in the funnel or website builder:

1. Click on the **section** where you want to apply the background
2. Open the section **Settings** and go to the **Background** tab
3. Choose **Image** as the background type
4. Select your background image from the media library
5. Adjust position, size, and repeat settings as needed

<Frame caption="Applying a background in the page builder — select the section, choose Image background type, and pick from your library">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/FZKrq1mleUCO75xo/images/media-storage-overview-display.png?fit=max&auto=format&n=FZKrq1mleUCO75xo&q=85&s=d73839f48eb95205286dbd5c771c5395" alt="Background applied in builder" width="1608" height="412" data-path="images/media-storage-overview-display.png" />
</Frame>

## Best practices

<AccordionGroup>
  <Accordion title="Ensure text readability">
    When placing text over a background image, add a semi-transparent overlay to ensure sufficient contrast. Most page builder sections support a background color overlay with adjustable opacity.
  </Accordion>

  <Accordion title="Use backgrounds selectively">
    Reserve background images for hero sections and key call-to-action areas. Using busy backgrounds on every section creates visual fatigue. Plain color backgrounds work better for content-heavy sections.
  </Accordion>

  <Accordion title="Preview on mobile">
    Background images behave differently on mobile screens. Preview your pages in mobile view after applying a background to ensure the focal point remains visible and text stays readable.
  </Accordion>
</AccordionGroup>

<Tip>
  Gradient and abstract backgrounds are the most versatile choices for section backgrounds. They add depth and visual interest without competing with text or images placed on top of them.
</Tip>