How do I effectively fake a div's background color using an image in the body element?_问答_开发者

How do I effectively fake a div's background color using an image in the body element?

开发者 https://www.devze.com 2022-12-29 17:15 出处：网络

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

相关专题：background css

I want to get something like the following:

How do I effectively fake a div's background color using an image in the body element?

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>