Change the Position of the Site Header Background Image

You can modify the position of the background banner image in the website header area. This is helpful in cases where you want to adjust the framing of a larger website banner image.

By default, the selected banner image will be centered at the top of the site header area, and the top of the selected banner image will align with the top of the site header area. But this default position may not always be the best framing for the selected image.

Take the following example of a site banner image:

This is a nice banner image. Unfortunately, the default background image position is not ideal in this case:

The background image is centered and the top of the image is aligned with the top of the site header area, which is not great framing in this case.

However the background image position can be adjusted by adding some custom CSS to the “Additional CSS” section of the theme customizer in order to modify the site header’s background-position property, as in the following example:

/* Change position of header background image */
@media only screen and (min-width: 1000px) {
  header#site-header {
	  background-position: 0% 80%;
  }
}

(Note that this example includes a CSS ‘media query’ that only applies this rule in cases where the browser viewport is 1,000 pixels or wider.)

With this modification, here is how the image is framed now:

In this case, this is preferred framing of this image.

Related Links