Update:
With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.
After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-
Add immediately after that the following line:-
Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."
With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.
However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.
Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.
After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.
Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-
#header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; |
|---|
Add immediately after that the following line:-
background-image: url(URL address of your image); |
|---|
Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.
This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.
If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."
Post a Comment