# How to change your site's background

> Add a background image to a layout in ProSite and configure it to fill correctly across all device sizes.

Source: https://www.kualo.com/knowledgebase/prosite-pages/how-to-change-sites-background
Updated: 2026-06-09

---

You can add a background to any page or layout in ProSite. Applying the background to a specific layout rather than the page as a whole gives you more control, and is the recommended approach.

## Setting a background at the page level

To set a background for an entire page, open the **Edit Page Settings** area:

![Edit Page Settings](https://kb-cdn.kualo.com/c2/7f/c27f74e9bbca5c6f670aa95686bdb17582dd28db.png)

Then select the **Background** tab.

![Background tab](https://kb-cdn.kualo.com/73/9c/739cc0562a459c7d1233cc008ac89179acc2c45b.png)

:::info
This method applies the background to the whole page. For most designs, applying a background to a specific layout (see below) gives you better results.
:::

## Setting a background on a layout (recommended)

Applying a background to a layout lets you target individual sections of your page and adjust the appearance per device.

1. Click the **Layout** you want to add a background to. In the Layout menu on the right, press the pencil icon to edit the background.

   ![Layout pencil icon](https://kb-cdn.kualo.com/ed/fc/edfcdd8977d6c0e93ad632567e7915ec8772b6a4.png)

2. In the modal window, select the pencil icon to choose an image.

   ![Background modal](https://kb-cdn.kualo.com/e6/cb/e6cbf3cf4fb484381632427fb4cdf2c6041b2cb5.png)

3. Select an existing image or upload a new one, then press **Select**.

   ![Image selector](https://kb-cdn.kualo.com/52/e1/52e12e504ca233d0e33f9cad5afc8cdf5dda4396.png)

## Making the background fill the layout

Once added, the image may repeat or sit off-centre. To make it fill the layout correctly, do the following:

- Turn off repeat, both vertically and horizontally.
- Set the alignment to centre.
- Turn off auto size and select the option to fill the container.

![Background fill settings](https://kb-cdn.kualo.com/e1/7c/e17cf6b28d51bae9bbbdd14dbe6447b5e0834731.png)

The image will now cover the full layout area.

## Adjusting layout height and padding

Depending on the content inside the layout, you may need to increase its height or padding so the background is fully visible.

**Option 1 - minimum height:** Set a minimum height on the layout.

![Minimum height setting](https://kb-cdn.kualo.com/2e/f7/2ef7571d9d928b7e3175e30b47ede47d7aefd0d7.png)

**Option 2 - padding:** Add padding to the layout instead. This approach has a useful advantage: you can reduce the padding on tablet and mobile devices separately, keeping the layout compact on smaller screens.

![Padding settings](https://kb-cdn.kualo.com/e4/b9/e4b901e045a8414555b5cca062219dd37b11938e.png)

Once you have finished, the background image will fill the layout and adapt cleanly across device types.

![Finished background example](https://kb-cdn.kualo.com/14/40/144004b29a1af2de20adefcab918f929f420648b.mp4)


---

_Source: Kualo Knowledgebase — https://www.kualo.com/knowledgebase/prosite-pages/how-to-change-sites-background · © Kualo Ltd._