Last Updated: January 11, 2016
Add a Header Image Suffusion tutorial will show you how to add a header image to the website. This is a very simple tutorial which everyone should be able to follow.
Latest News: I have added more information to help you add a header image.
Suffusion Add A Header Tutorials
- Add A Header Image Suffusion
- Suffusion Responsive Settings (Optional but important)
Add a Header Image Suffusion Steps
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 ) Navigate to Appearance -> Suffusion Options -> Skinning -> Header. See images below.
Step 2 ) Select the following options Custom styles and Use a predefined image.
Important: If you don’t select this option your image will not show up on your header.
Step 3 ) Enter the full image path to the Header Background Image. Remember if you select the wrong image or are not happy just click on Reset and start again.
Example: of a full path http://www.yourwebsite.com/wp-content/uploads/2015/04/header-image.png or it might begin with https://.
Important: The image path must be absolute and not relative. If it’s not the correct path the image will not show up.
Step 4 ) The following section Header Background Image Tiling, allows you to select from one of the following options.
- 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.)
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.
Information. 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.)
Important: 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.
Important: 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.
Click on the following URL Suffusion Theme Tutorials to learn more about Suffusion.
I will be updating this post from time to time. So keep coming back for more.
Other links you might want to read:
- Before You Publish A Website Revision Update This URL is a check list and a guide to developing website and blogs.
- First Time Blogging Revision Update This URL helps you understand all that you require to run a secured website or blog.