Originally, the WordPress Custom Header feature was used to change the background header of themes, usually with a solid colour or image. Many themes now use it as another form of adding a banner image setup, but with Senses Lite, I decided to go back to what it was really meant to be used for, customizing your header background. Senses Lite gives you seveal options to consider:
- Solid Colour background
- Image background
- Image background with an overlay option to add colour and opacity (transparency) to the image
Here are a few screenshots to show some of these options:
*Showing headers from the pro version.
Use Just a Header Background Colour
If you just want to have the white background and remove the current image, you only need to go as far as step 4 below.
- Go to Appearance >> Customize >> Header Image
- Find the “Current Header” setting and click on the “Hide Image” button to remove the image if one is shown.
- Next, find the “Header Overlay Opacity” setting and move the slider to the far left. This will make the overlay totally transparent so when we change our background colour, it will be the colour we select.
- Click “Save & Publish“
- Now go to the “Colours” tab and find the “Header Background” setting and click on it to show the colour selector
- Choose the colour you want and then click “Save & Publish“
Using a Background Image
Aside from a background colour, you can also use a background image. Your image can be a full width header image or a small one that you can center behind the logo or site title like the default style is. With any image, you also get an opacity (transparency) setting to make the image have the appearance as though it’s faded and blending into the background colour. Basically the header has an overlay layer above the background image that you can change the colour of and change its transparency level.
- Go to Appearance >> Customize >> Header Image
- Find the “Custom Header” setting and click on the “Add new Image” button and upload your image. You will be given the choice to skip cropping or to crop the image.
- Find the “Header Background Size” setting and choose how you want your image to be sized. Auto is default, Cover means keep the image filling the area at any header size, Contain means to keep the full image in the viewable area.
- Find the “Header Background Position” setting and choose how you want the image to be positioned in the background. Top means to put the top of your image at the top, Bottom keeps the bottom at the bottom, and Center means keep the image centered in the header area.
- Find the “Header Background Overlay Colour” setting and choose the colour you want. Default is white.
- Find the “Header Overlay Opacity” setting and slide the bar to adjust the overlay transparency level. This will give the give the appearance of your image being faded and blended into the header background colour.
- Click “Save & Publish“