Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Add Background Image to Blogger Header

Part 4: Align Position of Title and Description to Match the Header Image


Most people like to paint the Title and Description in the Background Image and then remove the text of the Header Title and Description. Of course this is an easy way to prepare the Header Image. However, I don't suggest you to do that. Because the robots and spiders of Search Engine like to eat the text of Header Title and Description that appear first after the body of your blog. Then Search Engines will index your web pages and rank your pages higher.

As we shown in previous tutorial, align the Title and Description to the Left by changing the Text-align property from center to Left.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: left;
color:$pagetitlecolor;
}

The result is shown in the picture below:

Blogger add Header Background Image

Indent the Description:

If you like to indent the Description a bit. This can be done by increasing the padding (e.g. from 20 pixels to 35 pixels). Please see previous tutorial. Here's the code:

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

The Blogger Header now look like:

Blogger add Header Background Image

This Blogger tutorial show how to align the text of Title and Description of Header.

blogger layout tutorials