# Milk: Header background

### Header location

The header is located at the top of every page.

By default its background colour will inherit the accent colour you have chosen.

![](https://web.archive.org/web/20230604071624im_/https://d33v4339jhl8k0.cloudfront.net/docs/assets/5e36e5442c7d3a7e9ae71c84/images/5e81eff52c7d3a7e9aea074e/file-BFq5SS6duB.jpg)

***

### Upload or change header background image

1. Open FlightDeck extension (control panel)
2. Next to "Header background upload" , click "Browse"
3. Select your header image file from your computer or device
4. Click Submit

***

### Remove header background image

1. Open the FlightDeck extension (control panel)
2. Find "Header image location"
3. Delete the file path from the box
4. Submit

***

### Header options

The following options are configured in the FlightDeck control panel:

| Option name                                                                                                                                                                                                                       | Values                                                                                                                                                                                                                                     | Output                                                              |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| <p><strong>Header background repeat</strong><br><br>Defines whether the header background image will repeat, and along which axis / axes.</p><p></p><p>Not applicable if the stretch or parallax options (below) are enabled.</p> | repeat-x                                                                                                                                                                                                                                   | <img src="/files/fF2iIouRY4mQcc6texuA" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | repeat-y                                                                                                                                                                                                                                   | <img src="/files/7jXVfiRUwp7y0uQIxQpq" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | repeat                                                                                                                                                                                                                                     | <img src="/files/cH8H4XGQmn9w5BeH4BlL" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | no-repeat                                                                                                                                                                                                                                  | \[image needed]                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
| <p><strong>Header Background Position</strong><br><br>Sets the header background starting position.<br></p><p>Not applicable when the parallax option (below) is enabled.</p>                                                     | <ul><li>left top \[1]</li><li>left center \[2]</li><li>left bottom \[3]</li><li>center top \[4]</li><li>center center \[5]</li><li>center bottom \[6]</li><li>right top \[7]</li><li>right center \[8]</li><li>right bottom \[9]</li></ul> | \[image needed]                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
| <p><strong>Stretch header to background to fill space</strong><br><br>Automatically resizes and scales the background image to fill all available space.</p>                                                                      | No                                                                                                                                                                                                                                         | \[image needed]                                                     |
|                                                                                                                                                                                                                                   | Yes                                                                                                                                                                                                                                        | \[image needed]                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
| <p><strong>Header Background Overlay</strong><br><br>Overlay that goes over the header background image.</p>                                                                                                                      | None                                                                                                                                                                                                                                       | \[image needed]                                                     |
|                                                                                                                                                                                                                                   | Colour Overlay                                                                                                                                                                                                                             | \[image needed]                                                     |
|                                                                                                                                                                                                                                   | Darken                                                                                                                                                                                                                                     | \[image needed]                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
| <p><strong>Parallax Header</strong><br><br>Subtly moves the header background when scrolling.</p><p><br>Note: Requires the background image to be taller than the visible header space<br></p>                                    | No                                                                                                                                                                                                                                         | \[image needed]                                                     |
|                                                                                                                                                                                                                                   | Yes                                                                                                                                                                                                                                        | \[image needed]                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
|                                                                                                                                                                                                                                   |                                                                                                                                                                                                                                            |                                                                     |
| <p><strong>Animated Header Particles</strong><br><br>Enables an animated geometric overlay across the header.</p>                                                                                                                 | No                                                                                                                                                                                                                                         | <img src="/files/RzrLp1IC7avRzEZ0lkLF" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | Yes                                                                                                                                                                                                                                        | <img src="/files/PtOFrqbx7x9oJjW8Xca1" alt="" data-size="original"> |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.planetstyles.net/feature-guides/milk-theme/milk-header-background.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.