Add A Header Image To Suffusion tutorial shows you how to add a header image to your site and manage the positioning and background colors.
Last Updated: March 2, 2018
Latest News: I have updated the information below.
Suffusion Add A Header Tutorials
- Add A Header Image Suffusion
- Suffusion Responsive Settings (Optional but important)
Add A Header Image To Suffusion
This tutorial is based on a png header background image with the following dimensions 1000 x 204 pixels. (Your size will be different. If your size is different, all you need to do is to adjust the settings to accommodate the size of your image.)
Many add different size headers and forget to adjust the settings and run into trouble. Also try not to add a very heavy in weight image. Try and keep it as light as possible. Remember speed is very important for SEO. It also means that those that navigate and land on your site will not become disappointed because your website takes too long to load up.
You also need to remember that adding a background image will not display the same when viewing in a small device. That is why many add a foreground image as a Logo to get the responsive setting they desire.
Hint: Remember to save everything you do or else it will not display on the front end of your website.
Step 1 ) Go to Appearance -> Suffusion Options -> Skinning -> Header. See images below.
Step 2 ) In the following image you select the following options.
- Custom styles
- Use a predefined image
Note: If you don’t select this option your image will not show up on your header.
Header Background Image
Step 3 ) The following image Header Background Image shows you what you need to enter in the field. You must enter the full image path to the Header Background Image. This is sometimes referred to as absolute path which is the opposite to relative path.
Note: You can always reset the image if you are not happy with your selection.
The following is an example of a full path URL to the image.
Full URL Path Example:
- Full path http://www.yourwebsite.com/wp-content/uploads/2015/04/header-image.png.
Header Background Image Tiling
Step 4 ) In the following section Header Background Image Tiling, you can select from one of the following options.
Header Image Tiling
- Repeat both horizontally and vertically
- Repeat horizontally only
- Repeat vertically only
- Do not repeat – show background once only (In this example I selected this option.)
Header Background Image Position
Step 5 ) Select the Header Background Image Position. In this tutorial I selected Middle of the page. You can select which ever position suits you best.
Step 6 ) The following image allows you to select and or set up one of the following options.
- Blog Title/ Header Color. I selected white. (You can choose your own color.)
- Blog Title / Header Decoration. I selected None.
- Blog Title / Header Hover Color I selected light pale purple.
Note: You can choose your own colors if you like.
Step 7 ) For the following Blog Description / Sub-header Color, select a color that suits your website. I selected white for this tutorial.
Step 8 ) The following image allows you to set up the following options.
- Empty Space Between Top of Page and Header. I left it as default 20.
- Height of the Header image. I changed this size to 204. You also have to take into account the extra 15px of padding above and below the header.
In this example I decided to remove the 15px top and bottom padding. To remove the padding simply go to Suffusion Options -> Back-end -> Custom Includes -> Custom Style and add the following code.
(Remember the image dimensions 1000 x 204 pixels mentioned in the beginning.)
Note: Your settings will be different if your header image size is different to the size used in this tutorial.
Hint: Remember to keep saving your work.
Add a Header Image Suffusion Optional Steps
Step 9 ) Navigate to Appearance -> Suffusion Options -> Other Graphical Elements -> Header, to set up the following options.
- Header Layout Style. I left it as Theme Default.
- Blog Title / Header Alignment. I selected left.
- Description / Sub-Header Alignment. I selected left.
- Description / Sub-Header Vertical Alignment, relative to header. I selected Below the header text.
Note: Your settings might be different depending on your requirements and layout for your website.
Step 10 ) There is another area you might consider adjusting as well. These settings will allow you to select Fixed width or Fluid/Flexible width.
- Go to Suffusion Options -> Layouts and change the settings according to your website layout design.
Step 11 ) If everything goes well you will see a header image like the one below. (Remember your image will be different)
That is all you need to do to add a header image.
Troubleshooting Header Image Tips:
- Delete the browser cache if you don’t see the image
- Delete the cache if you have a cache plugin
- Allow time for your server to serve the new image
- If none of the above options work start from the beginning and make sure you follow all steps above
Go to the following URL Suffusion Responsive Settings to configure the responsive settings.
If you have any questions please let me know. I will be updating this from time to time. So keep coming back for the latest.
More Suffusion Tutorials: