This tutorial will help you on how you can replace your blogger header with a background image in
picture window template, most bloggers find it difficult to do this because the process involve in replacing the header with image in window template is quite different from some other template.
If you upload the image background from the page elements, you will notice that it will affect your mobile template, except you add the header tag code to your template html and exclude the title and description to avoid overlapping of the background image and title.
If you upload the image background from the page elements, you will notice that it will affect your mobile template, except you add the header tag code to your template html and exclude the title and description to avoid overlapping of the background image and title.
How to Change Your Blogger Header
- Login to your blogger dashboard
- Click on "Design" > "Edit HTML" > back up your template
- Use ctrl F to find the code below
.Header h1 {
font: $(header.font);
font: $(header.font);
- Replace it with the code below
.Header h1 {display:none;}
font: $(header.font);
font: $(header.font);
- Now search for the following code
/* Header
----------------------------------------------- */
----------------------------------------------- */
- Copy and paste the following code below the code above
#header { width:600px; height:100px; margin:0 auto 10px; background: #fff url(BACKGROUND IMAGE URL) no-repeat top right; }
After placement of code in the second search, your final result should look like the image below
- Replace BACKGROUND IMAGE URL with the url/link of your background/header image, if you don't know where to host your image, you may read how to host image on blogspot
- Edit width:600px; and height:100px; to adjust your background image size until it best suit your header size and make sure you preview your changes before you finally click "SAVE TEMPLATE"