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: April 7, 2019
Latest News: I fixed a broken link.
This tutorial is based on a png header background image with the following dimensions 1000 x 204 pixels.
Note: Your size will be different. All you need to do is adjust the settings to accommodate the size of your header image.
Most of you will add a header image to your site. In most cases you will might forget to adjust all the different settings correctly. This will cause you to run into issues with your header. Here are a few tips to make sure your header is setup correctly.
Image Header Tips
- Try not to add a large image.
- Make sure the image is light, not too heavy in weight.
- Remember to test your site in a mobile device. (In some case it is a good idea to add a logo image rather than a header image.)
Remember speed is very important for SEO. Keeping your header image small and light, will help your site load much faster.
Hint: Remember to keep saving your work or else it will not display on the front end of your website.
Suffusion Header Tutorials:
- Add A Header Image
- Layout Style Options
- Footer Layout Style Options (Optional)
- Suffusion Responsive Settings (Optional)
Add A Header Image To Suffusion
Step 1 ) Go to Appearance -> Suffusion Options -> Skinning -> Header as illustrated below.
Step 2 ) In the following image, select the following options.
- Custom styles
- Use a predefined image
Note: If you don’t select these options, the image will not display on the header.
Header Background Image
Step 3 ) The following image Header Background Image shows you the field used to enter the URL full path to the image you will add to your header. You must enter the full image path to the Header Background Image. This is sometimes referred to as absolute path which is different 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 URL full path to an image.
URL Full Path Example:
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.
Note: 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 with the blog title and sub-header aligned to the top left hand side. (Remember your image will be different)
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.
- You might also like to check the following feature located at, Suffusion Options -> Backend -> Site Optimization. Make sure you have selected “Auto-generate the CSS and print it in the HTML source (Least load on server, ugly page source code)”. This will avoid loading your settings from a cached file.
- If none of the above options work start from the beginning and make sure you follow all steps above.
That is all you need to do to add a header image in suffusion.
Go to the following URL Header Layout Style Options to learn about different layout styles.
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: