CSS – The Background Images
By admin, July 1st, 2009,in Uncategorized | Comments Off
We’ll first add some background graphics. There are four of them, one for the header, one for the footer, and two in the main area of the page. Let’s start with the header and footer graphics. They were created in Adobe Photoshop by simply putting huge gray type on a darker gray background and then exporting them in .gif format. They are each 880 pixels wide, which is the maximum width I plan for this liquid layout. Once these graphics are in the images folder, making them appear in the background of the header and footer simply requires opening the 3_col_liquid.css file and adding the following CSS:
div#header {
background:url(../images/gray_header.gif) repeat-y #383838;
}
#footer {
clear:both;
background:url(../images/gray_footer.gif) repeat-y #383838;
}