Resizing the header


Hey guys,
Is there a way to resize the header image? My client wants a slightly shorter image.

It says it’s supposed to be 1900x 550 (or whatever)m but it only displays about 2/3rds of that.



It would appear you’re using the slider. The slider, as well as the header image option, is full screen so it doesn’t matter what size your image is, it will simply cover parts of the image in order to display it in full screen. So you should basically use something like 1920x1080 for your slider in order to get the best results.

If you want to make it shorter and thus covering the bottom of the image you can add this to a custom CSS plugin (while using the slider):

#slides {
   max-height: 500px;



I switched to the slider just to see if it was easier to resize. (it isn’t)

I will switch back to the header, what is the plugin I use for that?

…And where do I add the plugin patch?



Well, both of them are meant to be full screen so they are not really meant for resizing. You can also use the bundled Revolution Slider which works without needing to be full screen.

You can use any custom CSS plugin, this one for example.
Once you install it you’ll notice that it provides an area where you can paste your custom CSS, and that’s where you need to add the following code:

.has-banner {
   max-height: 550px;

And adjust 550px as you or your client require it.


Dude. You rule.