How do I effectively fake a div's background color using an image in the body element?
- by janoChen
I want to get something like the following:
The dark grey is the sidebar but I want to apply that color into the body element as an image which repeats itself vertically but at the same time doesn't cover the footer (light gray).
(this is the easiest way I found to stretch the color (dark gray) until the bottom.)
Part of my CSS:
body {
color: #888;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%
}
.container {
margin: 0 auto;
overflow: hidden;
padding: 0 15px;
width: 960px;
}
/* header */
#header {
background: #444;
}
/* banner */
#header-top {
overflow: hidden;
height: 77px;
width: 960px; /* ie6 hack */
}
#lang {
float: right;
padding: 50px 0 0 0;
}
/* work */
#content {
background: #EEE;
}
#content a {
border-bottom: 0;
}
#mainbar {
overflow: hidden;
margin: 0 10px 0 0;
width: 644;
float: left;
}
#sidebar {
background: #DDD;
color: #777;
overflow: hidden;
margin: 20px 0 10px 0;
padding: 15px;
width: 240px;
float: right;
}
#sidebar h3 {
color: #888;
}
#about {
margin: 0 0 20px;
}
/* footer */
#footer {
color: #777;
background: #DDD;
clear: both;
}
/* contact */
#footer-top {
line-height: 160%;
overflow: hidden;
padding: 30px 0;
width: 960px; /* ie6 hack */
}
#footer-bottom {
font-size: 10px;
margin: 15px auto;
}
Part of my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Alex Chen - Web Development, Graphic Design, and Translation</title>
<link rel="stylesheet" type="text/css" href="styles/global.css" />
</head>
<body id="home">
<div id="header">
<div class="container">
<div id="header-top">
</div>
</div><!-- .container -->
</div><!-- #header -->
<div id="content">
<div class="container">
<div id="mainbar">
</div> <!-- #mainbar-->
<div id=sidebar>
</div> <!-- #sidebar -->
</div><!-- .container -->
</div><!-- #content -->
<div id="footer">
<div class="container">
<div id="footer-top">
</div><!-- #footer-top -->
<div id="footer-bottom">
</div>
</div><!-- .container -->
</div><!-- #footer -->
</body>
</html>
