Center or right align header image and title on Blogger

If you uploaded your header image via Page Elements, Blogger will automatically align it to the left. There are no options for middle and right alignment. So then, it possible to align the image in at the center or to the right of the header?

Yes it is possible -using CSS (Cascading style sheet). But to define a HTML element in CSS you must first know the element ID or class name. After some checking I found out that “header-inner”  is the ID for the content of header widget. So what’s next?

You need to check the image placement method you chose when you uploaded the header image to Blogger in the first place. Different method handled the image differently, thus requiring different codes for alignment.

header image1

Once header image placement is known, it’s time to add in the code snippet.

  1. Go to Dashboard > Template > Edit HTML.
  2. Look for ]]></b:skin> line in your HTML code and add the appropriate CSS code snippet right before it.

Update: Now, instead of the steps above, there is an easier and safer way of adding CSS snippet in your template (opens in a new tab/window). Check it out!

Below are a list of CSS code snippets for you to choose from. Copy and paste them as explained above.

1. If you selected “Behind title and description” option

When you chose this option, Blogger added the banner image as a background to the header. To align it you need to reposition the background image by adding one of these CSS snippets:
(These snippets will not move the header title and description. For header title and description, see Aligning header texts).

  • To center
    #header-inner {background-position: center !important; width: 100% !important;}
  • To align right
    #header-inner {background-position: right !important; width: 100% !important;}

2. If you selected “Instead of title and description” or “Have description placed after the image” option

With this option, the image was added as a <img> HTML element. Use these snippets are to align the element:

  • To center
    #header-inner img {margin: 0 auto !important;}
    #header-inner {text-align:center !important;} /*include this line if you are using Template Designer*/

    Use only the first line for normal Layout template. Use both lines if you are using Template Designer.

  • To align right
    #header-inner img {margin: 0 auto 0 300px;}

    You need to adjust the left margin (300px in this example) to “push” the image to the right.

  • To align vertically

    To align the the image vertically, apply top padding to push it down, like this:

    #header-inner img {padding-top: 50px ;}

    Adjust the value until you get the desired position.

For option 1 and 2 to work, your header image width (plus margin and padding if any) must be equal or less than the container (such as header-wrapper, outer-wrapper etc.) width.

3. Aligning header texts (title and description)

The snippets below are for aligning header title and description. They will work with both text-only header and the text in “Behind title and description” image placement option.

  • To center
    #header-inner {text-align: center ;}
  • To align right
    #header-inner {text-align: right ;}
  • To align vertically

    Apply top padding:

    .titlewrapper {padding-top: 50px  !important;}

    Adjust the value until you get the desired position. For the description, use .descriptionwrapper.

4. Placing image and texts side by side

Use one of these if you want split the header into two parts -an image and a text parts, positioned side by side. These snippets are only applicable to “Behind title and description” image placement option.

  • To place image on the left and texts on the right
    #header-inner {background-position: left !important; width: 100% !important;}
    .titlewrapper, .descriptionwrapper {padding-left: 100px !important;}

    Increase left padding to push away texts to the right the header image.

  • To place image on the right and texts on the left
    #header-inner {background-position: right !important; width: 100% !important;}
    .titlewrapper, .descriptionwrapper {padding-right: 100px !important;}

    Increase right padding to push away texts to the left of header image.

Enjoy!

362 comments to "Center or right align header image and title on Blogger"

«Oldest ‹Older 201 – 362 of 362 Newer› Newest»
Anonymous,  January 15, 2011 at 1:00 AM    

The above helped me, too. FINALLY! You're amazing...thanks for helping the clueless!!!!

lauren January 16, 2011 at 9:50 AM    

I've read all the comments and they have been so helpful. I just have one glitch. I still cannot get my header centered above my blog. I can adjust the widths of the body to make the header centered, but then the blog posts look really narrow. Is there another way?? Thank you so much for your help.
www.laurensemmes.blogspot.com

Greenlava January 16, 2011 at 12:00 PM    

@lauren
I don't see the code in your template?
Have you added in the code (in no.2)?

Lauren January 16, 2011 at 2:42 PM    

Yes, I think I have. Maybe not? Do you see it now?

Jade January 16, 2011 at 4:00 PM    

You have NO idea how long I was looking up how to arrange my header. I just wanted to find out how to put the image left and the text right. I just wanted to say THANKS SO FREAKING MUCH. Because I was beginning to get super frustrated.
And I had a problem with the image and the text overlapping but I read your answer @stephanie and I adjusted the padding and added: .header-inner .section {margin: 0 15px;}

So it's all good. XD Again, thanks SO much.

Greenlava January 16, 2011 at 4:11 PM    

@Lauren
Go to Design > Edit HTML, position the mouse pointer inside the code window, right click and select all. Copy the code and paste it in Notepad.
Email me the file.

Anne Nonymous January 16, 2011 at 11:44 PM    

Thanks a lot!
This is the result: http://youcanthurrylife.blogspot.com

The Luna Family January 20, 2011 at 7:49 PM    

Question - My title image was big and just the way I wanted it, but it was way off to the right. I was trying to center the big image and I did this from above:

@AmourAndPsyche
Your image is wider than your header that's why you could not center it. I suggest you reduce the image size to match the header, this way:
#header-inner img {
width:100%;
height:auto;
}

It did center it, but it made it smaller. Help please! My blog is private, but I can send you in invite if you need to look at it. Thanks in advance!

Greenlava January 21, 2011 at 7:07 PM    

@The Luna Family
Please send me the invitation.

The Luna Family January 21, 2011 at 8:33 PM    

Sent!

Greenlava January 21, 2011 at 9:24 PM    

You want the image to span the beige background right?
First, set width to 995px:
#header-inner img {
width:995px;
height:auto;
}

and then change the centering code to this:
#header-inner img {margin:0 auto 0 -160px !important;}

thesonofaduckhunter January 21, 2011 at 10:17 PM    

I have a question about the header on my blog. www.thesonofaduckhunter.blogspot.com

I'm using an image as the entire header but I can't get it centered - it goes slightly to the right. On my computer, I can see the image in its entireity but on other computers, the image is cut off. I've copied and pasted this into the "Add CSS" section on the Template Designer. #header-inner img {margin: 0 auto !important;} #header-inner {text-align:center !important;}

Any other tips?

Thanks!

The Luna Family January 21, 2011 at 10:37 PM    

Okay - did that... check it out now and see how it's off to the right?

Greenlava January 21, 2011 at 11:22 PM    

@The Luna Family
You ADDED this:
#header-inner img {margin:0 auto 0 -160px !important;}

What you should've done is REPLACE the existing centering code that you've added previously,
REPLACE this:
#header-inner img {margin: 0 auto !important;}
with this:
#header-inner img {margin:0 auto 0 -160px !important;}

The Luna Family January 22, 2011 at 7:45 AM    

You are AMAZING! Check it out now! Looks perfect except there is a tiny little gap on the right. ;)

Greenlava January 22, 2011 at 12:44 PM    

@thesonofaduckhunter
It was stated in step 2 that your header image width must not exceed the width of the container.
However, your current image width is 1024px, whereas your container width is 860px.
To fix it, you can either reduce the image size to 860px, or increase the width: Template Designer: How to change column width

Gearmaster January 23, 2011 at 9:36 AM    

hi green,

im trying to do the “Instead of title and description” option, for this blog http://freepspgames4ol.blogspot.com/, but its not working.. the title is still there and the image won't appear. I cannot find what's wrong with the code.. I need your Expertise, Thanks in advance.

gearmaster

Gearmaster January 23, 2011 at 12:29 PM    

Hi Green,

I have solve my previous problem, I manage to make the image appear (FREE PSP GAMES). My problem right now is I cannot make the Title "FREE PSP GAME" to disappear, its on the leftmost side of the header right at the center. I need your help, I cannot pinpoint the problem, to make it disappear. my blog is this: http://freepspgames4ol.blogspot.com, your help will be much appreciated.. thanks a lot!

Gearmaster

Greenlava January 23, 2011 at 6:15 PM    

@Gearmaster
This CSS snippet should take care of that:
.header h1 {display:none;}

Gearmaster January 23, 2011 at 10:55 PM    

Hi Green,

YOU ARE REALLY AWESOME DUDE!!! IT WORKS! Even if i did not use the CSS Snippet. Thanks a lot.


Gearmaster

Circus Daily January 29, 2011 at 5:26 AM    

On to a new blog...and hoping you can help. I want to remove the white margins/padding...(not sure what it is)...around my header image so it blends in seamlessly with the background color. I'm using the new simple theme.

http://losethewalls.blogspot.com/

thanks,
Alissa

edgeindustrialphotography January 31, 2011 at 10:21 PM    

thank you - finally was able to centre my blog
picture/title ... was driving me crazy how to do it!
- george

Anonymous,  February 2, 2011 at 6:31 AM    

Thank you! Very helpful!

Design February 4, 2011 at 12:26 PM    

thanks this is great! i would one center all the body text, the postings?

Greenlava February 5, 2011 at 9:29 AM    

@Design
Try this code:
body {text-align: center;}

laina kay February 11, 2011 at 2:22 PM    

Wow, this site is great! I came here to try to center my header. Unfortunately I couldn't figure out my original header placement as you directed in the beginning of the article. I've tweaked my blog for so many years without really knowing what I'm doing (just trial & error), perhaps I deleted the original header? Anyway, I used your advice about expanding the outer wrapper if the header was bigger and it worked! My banner is now centered but in the process the alignment of my posts changed. I'd like everything to line up on the left vertically with the left edge of the header (as the photos do now). The date and post title are pushing further to the left. Why? I'm going crazy trying to figure it out. Any help you could give me would be much appreciated!

www.lainakay.blogspot.com

Greenlava February 11, 2011 at 5:07 PM    

@laina kay
Find this code in Design >Edit HTML:
#main-wrapper {
float:left;
overflow:hidden;
width:640px;
word-wrap:break-word;
}

add left padding to it, like this:
#main-wrapper {
float:left;
overflow:hidden;
padding-left:20px;
width:640px;
word-wrap:break-word;
}

melissa.pinto.portrait.photography February 12, 2011 at 9:58 AM    

Thank you so much for your post! I was going crazy trying to figure it out and this made it SO much easier! Now my logo is centered and looks MUCH nicer!! :-)

Anonymous,  February 13, 2011 at 1:24 AM    

freaking awesome.. 3 years i waited to center the title.. and now.. voila..its done..

laina kay February 14, 2011 at 12:53 PM    

So great! Thanks for your help! I actually used the padding code in the post date header and the post title since putting it in the main wrapper pushed everything over. It's much closer to what I wanted, the post title and date now align with the left edge of my header. Love it! I still have the problem of the images not aligning on the left with the post title and date. Is there any way to make all these items flush along the left side? I tried tinkering with the padding on .post img but couldn't get everything to completely align. I'm a bit of a neat freak and would love to have that margin straight and tidy. Thanks again for your help!

www.lainakay.blogspot.com

Greenlava February 15, 2011 at 10:41 PM    

@laina kay
Besides the 4px padding, each of your image link has a margin.
Try this:
.post img {padding:0;margin:0;}
.post a {margin:0 !important;}

NAJIAH AJLAA February 17, 2011 at 11:27 AM    

im sorry guys...im still not understand at all....please look at my blog and see that header http://lavenelmo.blogspot.com

laina kay February 19, 2011 at 5:12 AM    

Yippee! You rock! Thank you eversomuch! Having everything neatly aligned makes me so happy ☺

Greenlava February 19, 2011 at 8:37 PM    

@NAJIAH AJLAA
Go to Design > Template Designer > Advanced > Add CSS and enter this code:
#header-inner {background-position: center !important; width: 100% !important;}
Press Enter key and observe the preview.

Emm February 19, 2011 at 9:21 PM    

Thank you. This is just what I was looking for and it absolutely helped. Now I am going to browse arund the rest of your blog as i just adjusted widths from percentages to pixels and the whole blog is left-aligning!

Megan February 22, 2011 at 11:42 AM    

This totally worked!! Thank you!

C.L. Rogers February 26, 2011 at 8:49 PM    

Thanks, got it to work.

Aurora Bedouin March 3, 2011 at 9:30 PM    

Dear Greenlava,

Please help me center my blog title. Yesterday i read your instructions and even though i couldn't find the code line:

#header-inner {text-align: center ;}

i played around a little with the code line:

.header-inner .section {
margin: 0 200px;

and changed the margin from 0 to 200. I thought this worked since the title moved from the far left to the center (or so i thought). Today im looking at the title and i notice that it is not exactly in the center. even after changing the margin pixels from 200 to 300 or 250 it doesn't work, instead I get the title starting from the same location (a little off-center to the left) but this time the words are on top of each other. Please help. Im not sure if you want me to look for that code line you keep telling everyone about and to change the alignment to center (i can't find the code) or if you want me to add it. if so, where should i add it??

my blog address is: http://desertauroras.blogspot.com/

I appreciate your help. Thanks :)

Brandi Marchbank March 3, 2011 at 10:30 PM    

I am using the picture window template and i can't seem to center my header image. I've tried everything here and still no luck. I'm obviously doing something wrong. Please help!

Brandi Marchbank March 3, 2011 at 10:58 PM    

ahhh nevermind! i finally figured it out. thanks for the tutorial!

Greenlava March 4, 2011 at 1:13 AM    

@Aurora Bedouin
Just go to Design > Template Designer > Advanced > Add CSS, paste the code snippet in the custom CSS text box and press Enter key.
Use this snippet:
#header-inner {text-align: center ;}

Aurora Bedouin March 4, 2011 at 5:28 AM    

wow that was simple!! Thanks a lot Greenlave :)

My Kids' Mom March 10, 2011 at 10:36 PM    

excellent!

Liz March 12, 2011 at 1:20 PM    

Thank you so much. I was actually able to do it.

A Mormon Mommy March 12, 2011 at 11:52 PM    

This post was AWESOME!! I totally got my header centered IN ONE TRY!! This blog design stuff is not easy and this step went to smooth!! I could almost jump out of my skin!!

Simon Morris March 17, 2011 at 8:58 AM    

Excellent - works a treat, thanks! :-)

Jessie March 18, 2011 at 10:37 PM    

Can anybody help me with this problem I have in my blog? http://flamingjess.blogspot.com/ I want the title to be inside the box.

JALES MEERUT March 19, 2011 at 1:44 AM    

I want the result only for only blog header (center align)without image

Greenlava March 19, 2011 at 12:14 PM    

@Jessie
Use this code. It will put the title inside the box plus center them.
#header-inner {background-position: center !important; width: 100% !important;}
#header-inner {text-align: center ;}
.titlewrapper {padding-top: 80px !important;}
.descriptionwrapper {width: 400px !important; margin:0 auto;}

Greenlava March 19, 2011 at 12:25 PM    

@JALES MEERUT
To align only the blog title text, use the first code in no.3.

Shauna and Josh March 25, 2011 at 10:25 AM    

I have tried several different things but can't get my image to center. I need the image centered but I also have my description showing and would like that to remain aligned to the left. Any help would be greatly appreciated! Thanks

www.scrissey.blogspot.com

Greenlava March 26, 2011 at 5:11 PM    

@Shauna and Josh
This code will center the title, and leave the description alone.
.titlewrapper {text-align:center !important;}

Shauna and Josh March 26, 2011 at 8:48 PM    

I'm unsure if I'm doing something wrong but I tried it in the edit html and in the add CSS area and neither moved my banner. Is my image just too large for my template? This is giving me a hard time. Thanks for your help.

Elizabeth March 26, 2011 at 11:29 PM    

I can't believe that worked! For someone who doesn't understand HTML or any technology, that was like magic! Thanks so much!
-e (modern24seven.blogspot.com)

Greenlava March 27, 2011 at 10:44 PM    

@Shauna and Josh
Yes your image is too large.
To shrink it you can either:
Shrink it offline and then reupload it, or
add this CSS code:
#header-inner img {width: 818px; height;auto;}

Jess March 28, 2011 at 1:24 AM    

Thank you! Thank you! Thank you!

Bee March 29, 2011 at 4:53 AM    

Thankyouthankyouthankyouthankyouthankyouthankyou! You're the first person who's actually been able to help! FINALLY!

FancieStrands March 29, 2011 at 10:11 PM    

Thank you. Worked perfectly.

cheeky curves April 2, 2011 at 9:05 PM    

WOW I am a complete novice to HTML, but this worked perfectly. THANK YOU

Mrs. Rager April 3, 2011 at 7:02 AM    

Thanks you for posting this :D

Cindy April 18, 2011 at 11:49 AM    

There is a new option...place image above description. How do I center this image? :/

Greenlava April 18, 2011 at 3:10 PM    

@Cindy
Use no. 2 (same as "Instead of title and description” option)

[ d ï d ï t ] April 21, 2011 at 9:45 AM    

Thank You, It worked ! Look my blog muzhaki.blogspot.com

Anonymous,  April 21, 2011 at 4:58 PM    

it's not working! I tried so many ways but I still can't! I use normal template designer thing. any idea what to put or where? if i put # it will not work.

Greenlava April 24, 2011 at 12:54 PM    

@Anonymous
You put the code before ]]>< /b:skin> line in your template
or you go to
Design > Template designer > Advanced > Add CSS and put it in there.

liadaniele April 27, 2011 at 6:39 AM    

Thank you! I looked for 2 hrs how to do this and your post helped me in 5 minutes!

Jen Grenko May 1, 2011 at 3:53 PM    

This worked! Hallelujah!

Alicia Zak May 1, 2011 at 9:21 PM    

Thank you for this - worked like a charm!

m.a.n.i.s May 4, 2011 at 9:18 AM    

thanks a lot greenlava!!! this website teach me a lot!!! :)

Greenlava May 4, 2011 at 9:51 AM    

@m.a.n.i.s
Sama-sama :)

Salina & Olivia May 10, 2011 at 11:54 PM    

Hi! Thank you so much for the simplicity of this website in explaining what other people seem to make so complicated! It helped me to align my title no problem on my new blog! I do have a quick question:
How do I center align my blog description underneath my image/title in the header?

volos living May 11, 2011 at 6:58 PM    

please help me, i don't seam to manage to fix my header title text and my header image to have the same width...this is my blog http://volosliving.blogspot.com/

Greenlava May 12, 2011 at 2:23 PM    

@volos living
It's the left and right padding that's preventing the full width.
Find this CSS code in your template:

.header-inner .Header .titlewrapper {
padding-top: 285px !important;}
.header-inner .Header .descriptionwrapper {
padding: 0 30px;
}

and replace the padding from 30px to 0.

Greenlava May 15, 2011 at 2:03 AM    

@Salina & Olivia
Have you tried no.3 -Aligning header texts (title and description)?

Greenlava May 15, 2011 at 2:32 AM    

@volos living
There's a default 30px left and right paddings that's preventing your title from reaching full width. (It's not in your template CSS so you won't find it). Find this snippet instead:
.header-inner .Header .titlewrapper {
padding-top: 285px !important;}

and change it to this:
.header-inner .Header .titlewrapper {
padding-top: 285px 0 0 !important;}

Journolista May 16, 2011 at 8:58 PM    

AWESOME!!! I feel so smart after getting your help :)

Remmy May 26, 2011 at 8:40 PM    

ok am really sorry but after reading most questions i sstill cant finnd it,where do i get the codes from?i have tried copy and paste what you have said but when i preview,there is still no difference.
i do see the <![ but where do i get the codes to put before it?
thanks alot.

Fábio Cavalcante May 31, 2011 at 5:16 AM    

Hi Greenlava;

I would like to use a picture with "map" tags as my blog's header - http://www.blog.fabiocavalcante.com/ but it does not align with the left and top borders of the page. It seens to me that a space outside the outer.wrapper is blocking the alignment, i don't know... a changed a lot of paddings and margins, but could not find a solution.

The image was added in "HTML/Javascript" widget, because it was the only way i got to use map tag.

The rest of my site has this picture aligned with the page - http://www.fabiocavalcante.com/ - Is it possible to do it on blogger?

Greenlava May 31, 2011 at 1:35 PM    

@Fábio Cavalcante
You can try adding left margin to the picture:
#header .HTML img {margin-left: PUT MARGIN VALUE HERE;}

Anyway I can't give specific suggestions unless I can view the widget live on your blog.

Fábio Cavalcante June 1, 2011 at 4:16 AM    

Oh, Greenlava, excuse me, i removed the widget, cause i decided to make a diferent layout for my blog. But i want to say your blog is fantastic, i read a lot of posts last night, and its very very useful. Congratulations for your work!

Greenlava June 2, 2011 at 11:18 PM    

@Fábio Cavalcante
Thank for your kind words.

Francisca June 8, 2011 at 11:52 AM    

Hey Thank you so much for your tutorials. I created an header with an image for my blog. I couldn't figure how to enter my header. It to me about 20-30 minutes to figure it out. I accually centered it with your help. I liked you on Facebook. Feel free to visit my blog and check it for yourself at http://buyerreviews.blogspot.com

Francisca

Ruby June 23, 2011 at 9:01 AM    

Thank you very much. I used the code for centering the image and texts side by side and it worked great!

Audrey S June 25, 2011 at 5:31 PM    

thanks! it really works! :D

Beth July 6, 2011 at 11:48 PM    

Thank you! It worked great!

Lyndsey July 16, 2011 at 7:46 PM    

Just used code to centre header and it worked a treat. Thanks so much

Kristy July 22, 2011 at 2:41 AM    

Thank you thank you thank you!!!! I've been trying to do this to no avail and then found your tute and it was done in a snap! Thank you!!!

phoenixpug July 27, 2011 at 3:24 AM    

Thanks a lot. It worked perfect!

Erin Reese July 30, 2011 at 10:46 PM    

thank you very much. worked great!!

Kaysbeautyblog July 31, 2011 at 5:44 PM    

Thank you so much for this :)

Susan August 3, 2011 at 9:51 AM    

This isn't a question, and I don't do Facebook, however, I just wanted to THANK YOU very much for all the easy to follow help I've received from this website.
So far I've learnt how to align my header and also to place multiple tabs under it.
Much appreciated and I gratefully show your button in my sidebar.

The Vintage Heart August 6, 2011 at 5:57 AM    

I put the code in CSS not working and I can't find the whole code in html..only the b:skin part of it ??

cik ifa August 7, 2011 at 12:47 PM    

thanks!

Tracy C. August 12, 2011 at 2:52 AM    

Ugh! I STILL cannot center the Header! I have no idea what I'm doing wrong. I have tried this both in Edit HTML mode and Template designer add CSS. It is such a small thing, but it's driving me crazy!

ZooNique Baby August 13, 2011 at 9:40 PM    

You made this amazingly simple! Thank you!!! You've got a new facebook fan! :)

Greenlava August 14, 2011 at 8:03 AM    

@Tracy C.
Hmm...I can't find the code anywhere in your blog's source. BTW the right code for you is in no. 2.

gossipgurl08 August 14, 2011 at 12:39 PM    

aarghh i cant do it i tried placing the code but its not centred plz help me :(

yuu August 15, 2011 at 4:35 AM    

OMG! can you help me? i tried very long also can't make it to center!! :(

Greenlava August 15, 2011 at 3:48 PM    

@gossipgurl08
I should work fine. I've tested it on your blog. You want to use the codes in no.1 and 3.

@yuu
What's your blog URL?

yuu August 16, 2011 at 2:46 AM    

thank you for reply!

fangyi-yuu.blogspot.com

but i set it as private now. should i open to public first?

yuu August 17, 2011 at 5:16 AM    

http://fangyi-yuu.blogspot.com

here you go. i just set public my blog. thank you

Greenlava August 17, 2011 at 11:10 AM    

@yuu
Use this code:
#header-inner {background-position: center !important; width: 100% !important;}
#header-inner {text-align: center ;}

yuu August 17, 2011 at 6:33 PM    

OMG== failed. is it i paste at wrong place?
i found the code <![CDATA[/* and paste. is it correct?

Greenlava August 21, 2011 at 2:55 AM    

@yuu
Nope, you should paste it before ]]>< /b:skin>, not < b:skin><![CDATA[. Notice the difference.

yuu August 26, 2011 at 8:13 AM    

i did it!! thank you!! :)

yuu August 26, 2011 at 8:17 AM    

i did it !!! thank you for teaching!! :)

Undeclared Identifier August 31, 2011 at 12:06 PM    

Thank you so much for this post... I am so happy I can edit things now... :)
My blog: http://recurseit.blogspot.com

Laura September 5, 2011 at 10:55 PM    

been working on this for days and still cant seem to figure it out...hope someone with waaay more experience than i have can work their magic!

ive tried aligning my blog title, changing values and adding/removing html and still nada. can someone take a look at it and guide me in the right direction?

maybe has to do with image size/width?

}#header-inner {text-align: left ;}#header-inner {background-position: center !important; width: 100% !important;}]]>










/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);

}

.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper
{padding-top: 250px !important;}

.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}


http://laurasstockholmsyndrome.blogspot.com/

Thanks in advance for helping the newbie!!!

Greenlava September 12, 2011 at 12:16 AM    

@Laura
To center the text, you need to replace:
#header-inner {text-align: left ;}
with
#header-inner {text-align: center;}

To position it higher up, reduce the padding in:
.header-inner .Header .titlewrapper
{padding-top: 250px !important;}

Video Ticket September 14, 2011 at 10:43 PM    

the code appears on the blog above the search box, how do I remove it

Greenlava September 18, 2011 at 11:22 PM    

@Video Ticket
You copied the code improperly and furthermore you pasted it at the wrong place.
Read the FAQs on how to copy the code.
And please reread the tutorial on where to paste the code in you template.

janfoxdesigns September 22, 2011 at 8:51 AM    

THANKYOU, THANKYOU, THANKYOU....... finally page looks balanced!

bj September 29, 2011 at 7:45 AM    

My header gadget has disappeared from my blog and I have absolutely NO idea why. Have you heard of this before? And...how do I get it back?
Right now, I am just using an Add a Gadget and putting my header picture there.
Thanks
bj of sweetnothingsbj.blogspot.com

Greenlava October 2, 2011 at 7:39 AM    

@bj
You can always add it back via Design > Page Elements > Add A Gadget.

JD October 5, 2011 at 5:08 PM    

Worked perfect thanks!

zoe October 11, 2011 at 6:50 PM    

thank you!

EnchantedSmiles October 15, 2011 at 12:00 AM    

I cannot figure out how to center my header image. If anyone is still checking this, could I get some help/ blog url is http://simplyenchantedkj.blogspot.com/

Greenlava October 18, 2011 at 4:31 PM    

@EnchantedSmiles
Both the header and blog content area are off center because they do not occupy the full wrapper width.
Adding this code will fix that:
#header {width:auto; margin-right:11px;}
#main-wrapper {width:470px;}

...and you might want to use a wider header image(988px) to avoid image tiling.

Kate November 20, 2011 at 2:39 PM    

Yay, worked great. THANK YOU!! <3

nicole November 26, 2011 at 9:02 PM    

thank you so much. i created my blog almost 2 years ago and never changed the background which i tried to do yesterday and completely messed everything up. all my blog titles are off to the left. also where my text is written, the background is all white. it used to match the selected blog backgroud. i'm going crazy trying to fix this! i did however fix my header. it is now centered thanks to you!

Shareena December 15, 2011 at 8:21 PM    

Thank you!!! it works!!

100Ghz December 19, 2011 at 1:29 AM    

its works@!!!!thank you!!!

I am a Troublemaker February 17, 2012 at 4:28 AM    

Thank you! It works for me

Steven February 21, 2012 at 11:51 AM    

This was great! Thanks for putting the effort in. I was adjusting the widths of my blogger before this. I'm a noob and really appreciate your work here, thanks again.

Elizabeth :: Bébé Suisse March 7, 2012 at 7:46 PM    

I just wanted to say THANK YOU for this! I tried for a long time to figure out how in Blogger I could align the photo in my header to the right and couldn't. After reading your instructions I did it in less than a minute. Awesome!

Atelier Indigo Magazine March 12, 2012 at 10:12 AM    

Hi, I can't center my header image (and yes, my header image is purposely that large). I am unsure of where to place the following code:

#header-inner {background-position: center !important; width: 100% !important;}

There is no ]]> in my HTML anywhere. Thanks!

FasciNative March 19, 2012 at 9:23 PM    

Thank you!

Jennifer Lee March 23, 2012 at 3:34 AM    

Thank you so much for sharing this information!

Angela Niles March 29, 2012 at 6:13 AM    

Thank you!!

Sarah @ Home, Sweet... April 1, 2012 at 8:32 PM    

Thank you, thank you, thank you! That was incredibly easy, especially with the new, safer way of adding code.

♣ lily ♣ April 2, 2012 at 5:12 PM    

thank you for this tutorial!

Tick-A-Lock April 4, 2012 at 2:20 PM    

awesome! Thank you!

Vishnu Bhagawath April 7, 2012 at 7:02 PM    

thankss only ur site helped me

Ree April 19, 2012 at 8:42 PM    

hi do you have the code that will just center the post title and the date??

Greenlava April 21, 2012 at 8:22 PM    

@Ree
Use this CSS snippet:
.post-title, .date-header {text-align: center;}

Mizz nYi April 24, 2012 at 1:13 AM    

thanks for the info, its really help me.

FxTrader April 25, 2012 at 8:06 PM    

Thank you very very much. Now my blog title and description shows in center. Must say.. very useful information..

My Baggage Counter April 27, 2012 at 8:25 AM    

thanks you! very useful!:))

Anonymous,  May 5, 2012 at 10:46 PM    

THANK YOU SOOOO MUCH <3

FluffySoap June 14, 2012 at 9:58 PM    

Thank you! It worked for me :)

Emilie Buestad Lohmann June 24, 2012 at 6:32 PM    

OMG! Thank you so much...
Tried some different links, but this really worked instantly!

Thank you for running this blog; It's very, very helpful.

Sab de Leon June 29, 2012 at 2:43 AM    

Wow, it worked! I really need that extra space for my image so it doesn't appear at the very edge of the page. Thanks so much. :)

Ami July 10, 2012 at 12:30 PM    

Excellent directions, super easy. Thank you!

Dahn Casselman July 15, 2012 at 2:05 PM    

I was having issues with text and the header picture size and I found a solution here immediately. Thank you for all your expertise!

malik haseeb July 17, 2012 at 5:57 PM    

Awesome Brother You Solved mY probLEm Thankyou Very Much

Donna McDine July 23, 2012 at 11:13 PM    

Thank you, you are the best. It worked easily and beautifully. Now my header won't annoy me aligned left! Thanks a bunch!

en-emy September 9, 2012 at 8:59 PM    

thank you soooooo much for sharing this tips! it works!

SaRmAd KhAn September 22, 2012 at 9:05 PM    

Thank You. Worked

Knitted Home September 26, 2012 at 7:27 AM    

Thank you so much!! I knew it had to be something simple! :]

PM Prints October 12, 2012 at 12:59 PM    

i am trying to make the image at the left side.. don't know where to adjust www.philippineclimb.com please help me! thnks

Greenlava October 14, 2012 at 1:05 AM    

@PM Prints
In your case, add this code:
.menu-primary-container {padding: 0 !important;}
dl.image_map {width:960px !important;}

how to climb November 3, 2012 at 10:12 PM    

thanks for the informative posts.

Carrie Terry December 4, 2012 at 1:43 AM    

I have tried every code that I can find to vertically center my blog title. What is your suggestion? Thanks

Jesse Hopkins December 5, 2012 at 10:32 PM    

That worked great. Thank you so much!

Greenlava December 10, 2012 at 12:35 AM    

@Carrie Terry
It's right there in the tutorial.

KayNine December 18, 2012 at 11:50 AM    

Hello,

I've almost got it to where I want it to be. but the text alignment is still giving me fits. I'd like it to fit within the constraints of the header image. Do I have to make a wider/ larger image or is there another way?

Image of the header
http://i1106.photobucket.com/albums/h377/skaerf/Untitled_zpsfb5d6f1a.png

Greenlava December 25, 2012 at 10:53 PM    

@KayNine
Go to Template > Edit HTML > Proceed and replace this:
#header {width:auto; margin-right:11px;}

with this:
#header {width: 645px; margin: 0 auto;}

shelly January 18, 2013 at 8:30 PM    

Thanks so much for this. I seemed to get it working in FF and Chrome but in Internet explorer the header text is moved a little to the left.
http://fds-sleek.blogspot.nl/

Any ideas?

Loulou lolita January 27, 2013 at 5:38 PM    

Thank you, thank you! It was the only tutorial that worked!

GuidePedia January 29, 2013 at 4:15 PM    

Thanks it was very useful to me i have alligned it in center

cherylaghniads-Fakta Info Unik February 6, 2013 at 10:47 PM    

nice share but just look difficult for new one like me :D

gg February 12, 2013 at 12:56 AM    

Thank you SOOOO much!!! perfect!

«Oldest ‹Older 201 – 362 of 362 Newer› Newest»
Click to go to top Click to comment