CSS tutorial for Blogger users: styling the header

Surely the header of our Blogger blog is one of the first things we need to stylize with CSS. For example, given the following markup:

<div id="wrapper">

    <div id="header">
        <h1><a href="http://onwebdev.blogspot.com">onwebdev</a></h1>


we can add the following styles if we want our header appear with a tiled background image:

body {
    font-size: 76%; /* 1em = 12px */
    margin: 0;
    padding: 0;
    background: #fff;
    color: #333;

#wrapper {

    width: 100%;


#header {

    height: 190px;
    background: #def url(img/header.png) repeat-x 0 0;
    position: relative;


#header h1 {

    margin: 0;
    font: normal 8em Georgia, serif;
    color: #339;
    position: absolute;
    bottom: 0;
    left: 0.5em;


#header h1 a {

    color: #339;
    text-decoration: none;


The background image is repeated horizontally using the background-repeat property. Note that we've also specified a background color for our header. This is considered a best practice to follow in order to make sure that a correct contrast between background and foreground colors is provided to users who have turned off images in their browsers. To achieve the effect of a title put at the very bottom of the header, we use absolute positioning on the h1 element. This work because its parent element has the declaration position: relative. This is called contextual positioning. You can see the final result here.

Leave a Reply

Note: Only a member of this blog may post a comment.