Storefront’s repeating header

Hi @mnatseah624,

Great question. You can do that with the background image. Here’s how:

1. Go to the Appearance section in your dashboard and click on Customize.
2. Click on Custom CSS.
3. Add this to the box there:

   
   header#masthead {
       background-size: cover;
   }
   

4. Save your changes.

See if that doesn’t cause the image to fill the entire area without repeating. Let me know if you run into trouble.

Take care,

Thanks to Three Sons for his great advice.

I’ve another question. I’d like to have a darker color tint on my masthead image. I’ve come to Storefront from Twenty Nineteen, which had that option. But I’m not seeing it in Storefront. Does anyone know where to find it?

That’s a good question. There isn’t a built in option to set a tint or overlay for the header image. You can still do it with a bit of custom CSS. Add this just below the previous snippet:

header#masthead::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000;
    opacity: .5;
}

You can set the color by changing the #000000 (black) to a different hex color code. You can change the opacity by altering the .5 too. It’s on a scale from 0 (completely transparent) to 1.0 (completely opaque).

Give that a try and see if it will give you a color overlay as you want.