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!
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?