How do I effectively fake a div's background color using an image in the body element?
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>
You can do this using an image to fake the background or there is a nice CSS solution here - http://jsfiddle.net/spacebeers/s8uLG/2/
#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee;
<div id="container">
<div>
<p>Content 1</p>
</div>
<div class="col2">
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
<p>Content 2</p>
</div>
</div>
加载中,请稍侯......
精彩评论