Thrive Knowledge Base

How to Customize Your Website Header (Custom Color, Custom Image Background)

To change the style of your theme’s header, go to the “Theme Customizer” by clicking on “Appearance” and then, on “Customize” in your WordPress admin dashboard:

2014-06-18_0921

Once you access “Theme Customizer”, click on the “Header” section to open it:

At the bottom of the “Header” section, there are several options available, that let you change the header background. In order to access them, click on the “Header Type” field to open the drop-down:

 

Custom Color

Select this option to choose a custom color. You can do this by using a color picker or entering a color code in the field next to the “Select Color” box. The color that you choose here will display uniformly across the entire header background.

Background Pattern

Select this option if you want a pattern to be displayed as the header background. Click on the arrow next to the “Pattern” field  and choose one of the many included patterns that will be opened under it.

Background Image

Select this option in order to have an image used as the header background.

 

You can upload an image by simply clicking on “Select image”. Your WordPress Media Library will open. Choose the image you want to upload and then, click on “Choose Image”.

After the image is uploaded, you can set a header height (in pixels) in the “Header height” field to show more or less of the image.

Furthermore, there are two ways in which an image can be displayed in the header: “Full-Width” and “Centered”.

When you choose the “Full-Width” option, the image will be scaled to fit the entire width of the screen. 

When you choose the “Centered” option, the image is shown at its full width and full height, centered in the header area. This will look best when the header image has the same width as the total content width.

Once you have set a header style you are happy with, you can use the menu link color pickers at the top of the “Header” section to make sure that the menu items are visible on the chosen background.

Hopefully, this article was useful for you. If so, please give us a smile below :)

>