Masthead, metaslider, and interior page header dimensions for outside graphic designer

Thanks.

There is no set width for your masthead background. It’s 100% screen width. Same goes for Meta Slider, also 100% screen width.

Masthead
Add the following to Appearance > Custom CSS:

#masthead {
  background-repeat: no-repeat;
  background-position: center;
}

If you leave the header padding as it is now you should resize the masthead background image to be 220px in height.

Meta Slider
I’d recommend setting your slider up to be 1905px width x whatever height you choose.
If you’re using Meta Slider free you can add an additional centered image layer in the caption field. We cover this method here: https://siteorigin.com/vantage-documentation/slider/

There is no easy answer with 100% width elements. These are my suggestions:

Masthead:
The CSS I sent removes the repeat and gives you a centered background. You can’t use cover with an image with text in it, or rather I would advise against it. Cover works nicely with images but not text that people need to read.

Meta Slider:
Go with 1905 px width and the appropriate height. Set your slider settings up to match your image dimensions.