Monday, February 12, 2007

JPEG Banner for Minima Black

Here's how I replaced the standard banner on the Minima Black template with my own graphic. The whole page header is wrapped in a div element with ID #header-wrapper. The strategy is to use the JPEG as a background for the page header wrapper. I have done this by adding the background-image property with the URL of my banner image and setting the width and height properties to match the dimensions of my banner:

#header-wrapper {
width:750px;
height:150px;
margin:0 auto 10px;
/* border:1px solid $bordercolor; */
background-image: url(http://www.thornton-oetzel.com/ken/liquidair/assets/images/LA_Banner.jpg);
}

I also commented out the border property. This puts the banner image behind the original banner text. The next step is to turn off the banner text because my banner is self contained. That is simply achieved by adding a display:none property to the header:

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

That's all there is to it.

No comments: