Blogger Templates Layouts Tutorials | Web Page Design Tutorials Home

How to Customize Blogger Header

Setting Background color of Blogger Header

We already knew the HTML codes of the Blogger Header, it is time to customize the Header.

You can use the background-color property to set the background color of the header.


#header-wrapper {
border:1px solid #333;
margin-top: 0;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
background-color: #FC0;

The background of the whole Blogger Header will be filled with color as shown below. Since the Header Wrapper is the outer layer, the whole Header will be filled with color.

Setting Background color of Blogger Header


#header {
margin: 5px;
border: 1px solid #333;
text-align: center;
background-color: #FC0;

Remember that the Header layer is the INNER layer that residue inside the Header Wrapper? Since there are 5 pixels margin around the outside of #header, the result will be shown as the picture below:

Setting background color of Header

This Blogger tutorial shows how to customize the background color of Header.

blogger layout tutorials