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>
</div>
</div>
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.