Add Background Picture to Header in CSS.In Blogger you can directly upload a picture to the Blog Header. A few bloggers have been reporting problems with this method. Hence here is the old method brushed up for use with Classic or Layouts Template........REMOVE HEADER PICTURE
The first step is to remove the old picture. Sometimes the picture refuses to get removed. Then the first remedy is to clear the cache. Always use Firefox browser for optimum logging experience.
If clearing the cache does not help login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code : <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
Change this to : <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>
Save Template. Switch to Page Elements tab. Click Edit link in the Blog Title widget. In popup window click Remove button.
Then click 'Add Page Element' link in the header. In pop up window choose 'Page Header' widget and choose the options and save. Here in the options you can add a new image or you can add it as in the next step.ADD PICTURE AS BACKGROUND
If you want to add a picture that can be easily removed you can add it as a background in the CSS part of the template.
First create your header picture and upload it to Googlepages or Photobucket.com and copy down it's link. Make sure that the width of the picture is the same as that of the header-wrapper. (See code in next step for width of header-wrapper) If the width is not the same the picture will protrude out on one side.
Then login at Blogger.com and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;
height:200px;
}
Add the background line as shown above. Replace 'LINK_OF_PICTURE' with actual link of your uploaded picture. Change the '200px' in the height line to the actual height of the picture. Save Template. Clear Cache and view blog.
The Blog Title and description will be shown on top of the picture. If you wish you can hide the Blog title and description to show only the picture.
Like this article? Subscribe to the RSS feed!
An update on Google+ and Blogger
-
Following the announcement of Google+ API deprecation scheduled for March
2019, a number of changes will be made to Blogger’s Google+ integration on
4 Febr...
28 comments:
Can you Help me Vin.?
I question this because I didn't find it on your helpful blog or I might have missed it.
" I've got difficulties in choosing the TEXT COLOR of my posts in the box post editor because the background of the text box editor is not the same as the background of my templates ( where the posts will appear after been published ). How to change the Background color of the Box of Text Post editor ( the box where we type our posts ) ? or I will be very thankful if you would show me how to change the layout of that page ( "publish a post" editor page ) thanks in advance ....
sincerely
Vian,
As far as I know it cannot be done. Why not permanently change color of text font in the Template Code box?
Thanks for the help. Blogger keeps bugging constantly about the header. Glad you found a simple solution for my impatient mind.
You helped me to get all post title links on sidebar ..and today they are all gone? do you know what causes this?
Alannah Ryane,
Try clearing the cache.
How do I stretch my photo accros my header so that if fits perfectly? I try to edit my html and in the header portion I only find margin and padding. I don't know what the dimensions that are needed for my photo. Could you shed some light on this.
Sturgie,
Your picture width is 430px. While your header size is 740px - same as width of 'outer-wrapper'.
Vin
I would like to change my header so that I could have four columns in the header where I could add pics of my grandchildren. Could you help me with this. I would really appreciate any help you could give.
Thanks for your help.
BJ
BJ,
Use a Tables code with 4 columns and one row and paste the link of a picture in each cell. See How to Customize the Header.
Hi Vin.
Is there any practical use for the $variables? I declared a $number variable, and it works OK, but i need to set its value later in the code (in the #header H1 section )using JS. I'd like to know at least if I can set the value with something like $number: 4; or $number="4"... I've tried all the combinations but it doesn't get the value... give me a hand mate!
José Quiroz,
As far as I have been able to discover the $variables are used only to make them available in a GUI form on the Fonts and Colors subtab of the Layouts tab.
What code did you use to declare the variable? What code did you use in the #header and what is the script code?
hanks for your reply
Basically, I declare the variable in the definitions section like this:
Variable name="IdImage" description="Image Id" type="automatic"
default="7" value="7"
Later, I can use the variable in the #Header section like this:
#header h1 {
background:url("http://www.jquiroz.com/headers/front$IdImage.jpg") no-repeat;
where it succesfully trasnform the URL string to
"http://www.jquiroz.com/headers/front7.jpg"
So far it works OK, the next step for me is assigning a value to the
varable IdImage, theorically something like this:
$IdImage=8;
IdImage: 8;
$IdImage:"8";
(...)
You name it, I've tried any combination but the variable keeps its
value from the declaration. If you can use the variable later, I guess
there should be a way in which you can assign a new value...
The final step will be using JS to assign a random value to the
varaible, so the picture in the header will be differente everytime
you refresh the page:
script type="text/javascript"
{
aleat = Math.floor(Math.random()*10);
document.write("$IdImage="aleat")
}
/script
(I had to remove the "<>" so the comment can be accepted)
This is not my main concern so far, as it should be easy to do as soon
as I descover how to assign the value....
Any clue?
my blog is comevenezuela.blogspot.com.
Thanks for your help! great job your doing there.
José Quiroz,
Good Idea! But there is already a hack for rotating images in the header.
I seem to have misplaced that link but if I get it I will send it to you.
well... i really wanted to use the variables, let's see which trick you've got in your hat...
José Quiroz,
See here.
Hi Vin.
2 things here. I know the trick, it has been on my personal webpage for more than a year (www.jquiroz.com), but it didn't work on blogger and now I CAN see why. I was using document.write to write just the background line, but I reckon I need it to output all the header style section. Actually because mi images are on the same web directory and have the same name + number, I don't need to define an array. Will try to midify my code an I let you know. Big thanks for your help so far.
Jose
Well, I didn´t realize one can put a style declaration later in the body. That was it! now is up and running, please have a look. comevenezuela.blogspot.com
Hello! It Works! But I could not take the link function from the header... I've tried so many times in the css code, but nothing worked... Check my blog, when you roll the mouse over the header image, it works as a link, showing an awful grey color the same way the links do. How can I take off this link from the header image? Thanks!!!! :))
xandrelima.blogspot.com
Xandre Lima,
Which browser and version are you using?
thanx... header problem solved with your post ... thanx
Hi Vin,
Pls see my blog I want to modify and want to make my blog look good, create drop down for dishes, extend the body, add picture to the header,actually i am not able to see the add and edit element page getting an error msg. thanks.
Simplysara,
Tackle one problem at a time. What is the exact error message?
Vin - I've tried everything you have suggested - clearing caches etc. another help page suggested making the opacity of the header space 0 - tried that, loaded my photo up to photobucket - no joyeither. I can get the image to load in a new blog - but not mine...
Donna Heart,
What is your blog address?
Vin, you are awesome! thank you sooo much!
I will buy you a drink anytime!
Kindle
www.redesigndiva.com
Thank you so much for solving this blog title problem for me. I was at my wits end, and you completely saved me.
Thank you very much for your prompt help Vin...i like my header for now...some recognized me in the image...lol.. but come Spring again someday i,ll change again..it bothered me that it would not "go away"again...now i know how to remove it.. its ok...thanks again!!
greetings Francien.
Hi,
Is this workable for "Sand Dollar Templates? I cant find coding for header wrapper. Help pls
CLICK TO LEAVE A COMMENT..... :-)
Skip to top of post.
Who is talking about the above post?