> For the complete documentation index, see [llms.txt](https://docs.planetstyles.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.planetstyles.net/feature-guides/milk-theme/milk-header-background.md).

# 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"> |