Customize Header

Hey,

The background color is pretty easy to do:

.site-header {
  background: blue;
}

For a background image, you can use a similar technique:

.site-header {
  background-image: url('https://example.com/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

The background-size set to cover will ensure the image fills the entire header space available and I’ve also set it to never repeat. You’ll just need to upload an image to your site and then replace the placeholder URL in the code above with the image’s URL.

Hi Ben, thanks.

But, as you can see, the image seems smaller than the entire header. ??

The site header has a maximum width of 1400px, so that will constrain the background image on any screens wider than 1400px.

Another way to approach this is with the following CSS:

.max-width:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 102px;
  background-image: url('https://example.com/image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50%;
}

Since this isn’t based on the height of the header, you’ll need to manually enter in a height value that matches. You may want to use the previous snippet for mobile screen widths and then switch to this snippet for screens 1400px and wider with a media query.