The header media refers to the images used in the header. You can choose to use any image for the header and configure the alignment, overlay, and a couple of other settings.

Navigate to your website admin, browse to Appearance > Customize > Header > Header Media.

Setting the Image for the Current Header

You can use any image of your choice. To directly upload the image from your computer, just click over the “Add New Image” button provided under the “Current Header” label in Header Media panel.

Preferably, you should upload an image that matches the width and height dimensions of the header. It would make sure your image gets placed in the background exactly as you desire. Besides, it makes the site less resource-heavy.

Alternatively, you can use any image and crop it to match with the header dimensions as well.

Change the Overlay Color for the Header

You can have an overlay color on top of the image you have uploaded for the header.

Just click over the “Select Color” button under the “Overlay Color” label in Header Media panel.

Position Image for the Header

You have fine grain control over positioning the image for the header. You can position the image in the following ways.

• Top Left
• Top Center
• Top Right
• Center Left
• Center Center
• Center Right
• Bottom Left
• Bottom Center
• Bottom Right

To select any of the given options, just click over the drop-down menu under the “Position” label in Header Media panel.

Set the Image Attachment Preference

You can use any one of the two given attachment preferences for the header image. 

• Scroll
  • It scrolls the image alongside the page scroll.
• Fixed
  • The image stays fixed inside the header, as the page scrolls. So you can see will still see the control scrolling, often known as the parallax effect.

Just click over the drop-down under the “Attachment” label in Header Media panel and choose your desired option.

Set the Repeat Settings for Header Image

If you have a small image or icon that you want to repeat throughout the header background, you can use this option for it.

You get the following four options.

• No-repeat
  • The default option, where the image is not repeated at all.
• Repeat
  • The image is repeated to cover the available screen space, in both x and y-axis.
• Repeat-x
  • The image is repeated just on the x-axis.
• Repeat-y
  • The image is repeated just on the y-axis.

Just click over the drop-down menu under the “Repeat” label in Header Media panel and choose the desired option.

Configure the Background Size

You can choose either one of these background sizes

• Auto
  • Auto decides for which background size would look best in the available space.
• Cover
  • Expands preserving the proportions
  • Somewhat zooms the image to cover the available space
  • Highlights over certain image dimensions.
• Contain
  • The image should be scaled from each side as large as possible but not exceeding the length of the corresponding side of the container.