# 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="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2F8jfrAcBxgMdDkW3nT87d%2Fimage.png?alt=media&#x26;token=4dfd5152-08c8-44c8-bc65-62de74cc403e" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | repeat-y                                                                                                                                                                                                                                   | <img src="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2F6Umncj1PehIBa4weWbRa%2Fimage.png?alt=media&#x26;token=4b6dd36e-fc0c-4ee6-926e-f9c9cdb52ce9" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | repeat                                                                                                                                                                                                                                     | <img src="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2F1pgWmI9PLIvujJErnzvD%2Fimage.png?alt=media&#x26;token=f2aa8696-e34f-4b74-97f1-673516e653ab" 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="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2Fdmj6ChZ9gwarB4e8qRaN%2Fimage.png?alt=media&#x26;token=1aa67aa1-3814-488d-8273-1b4ee8819c42" alt="" data-size="original"> |
|                                                                                                                                                                                                                                   | Yes                                                                                                                                                                                                                                        | <img src="https://1973628527-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTA7pvCEDX33HvSpe5svL%2Fuploads%2FDPmtjpVlZRiW4ofKLEq4%2Fimage.png?alt=media&#x26;token=dbe2aa90-2199-490d-be68-27a394efa807" alt="" data-size="original"> |