Quick Tip: Position Header Background

I often see small problems in blog templates when surfing or returning someone’s visit to my profile or blog. Call me a perfectionist or busybody, but I’m tempted to give the author a shoutout. As you know, social media message boxes often have size limits, so there’s rarely enough room to explain. This series of posts will serve that purpose. Today’s tip is about using code to properly align your header’s background picture.

Here’s what the header at Guru in Jeans looks like — great picture but could be centered better. Are you one of those people who have to adjust crooked pictures on the wall? Click for larger view.
This is the errant code:
<div id=’header-inner’ style=’background-image: url("http://4.bp.blogspot.com/_4OVVrirI3wI/SSA9ih33wvI/AAAAAAAAAHc/QHEf8GDT24w/S660/j0433055.jpg"); background-position: left; min-height: 438px;_height: 438px;background-repeat: no-repeat; ‘>

The code in red should be background-position: center;

When positioning within an element (the ‘header-inner’ wrapper) the first parameter controls horizontal placement — left, center, or right — while the second controls vertical— top, center, or bottom. In this case where only one value is provided the second one is assumed to be ‘center’. So ‘left center’ put the picture on the left, making for the extra space on the right hand side, while the top and bottom borders are even.

Once, or if, the author makes the correction you can see it at the actual blog! All the owner needs to do is go to Blogger Layouts, select Edit Html and find the code in red, then change it. Do a preview before saving the template. Then everything will be straight and I can sleep at night!

You may also be interested in other posts related to blog design.
Quick Tip: A Word About Blog Margins and Such
Quick Tip: Hide Blogger Archive and Label Counts

Have you seen someone who needs this tip — give them a shoutout pointing here. They will want to sign up for free tips, as I know you’ve done already?


If you found this post useful, leave a comment and share your thoughts with others.
Get future posts in your RSS feed or by email.


6 Comments

  1. Header background is very vital to a blog. Other than it’s position, it’s a key factor to every blog since it’s the very first that’ll draw readers attention. But really, only a wrong header position can ruin a good header image itself. 🙂

  2. @Liane – I agree, some are such great photos and descriptions which get lost against the chosen background. Thanks for stopping by and bumping into this post.

  3. i agree with you, and thankx for the very productive comment at the bc discussion. i’ve made the necessary tweaks, again thanks.

  4. @Warshock – I’m glad you took action on my suggestion and hope you come back for more. The Smart Blogging Co. group at BlogCatalog is a great place to exchange ideas and assist other bloggers.

  5. i used to host my photos in blogger but then, the image positioning drove me crazy then. i ended up doing the hard coding and hosting it elsewhere.

    didn’t know it lies in the “background-position” property (for headers). cool tip and info! ^_^

Comments are closed.