HTML无法获取背景图像以包裹100％的高度

时间：2011-03-26 22:42:20

标签： html css background

工作网址：

http://69.24.73.172/demos/water/home.htm

我无法将背景图像的高度垂直拉伸100％，演示网址显示了这一点。

HTML 

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>
        Buy Fair Water - From Charity Water
    </title>
    <link rel="stylesheet" href="default.css" />
    <meta name="description" content="Charity Water is a way of buying bottled water, the fair way.  Why buy from large corporations that hunt profits, when you can buy water in a way that benefits everyone." />
</head>



<body>

<div class="main-wrapper">
    <div class="main-content">

        <header>
            <a class="logo" href="home.htm" title="Homepage for Charity Water">
                <img src="images/logo.png" alt="Charity Water Logo" />
            </a>
        </header>

        <div class="content">
            <h1>Charity Water</h1>
            <h2>What we do</h2>
            <p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
            <h2>What we do</h2>
            <p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
            <h2>What we do</h2>
            <p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>
            <h2>What we do</h2>
            <p>wfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wefwfewefwef w wf wfe wef wef wef wef wef</p>





        </div>

        <img src="images/footer.png" />
    </div>
</div>



<div class="menu">
    <nav>
        <ul>
            <li><a href="home.htm" title="Home of Charity Water">Home</a></li>
            <li class="selected"><a href="about.htm" title="Chairty Water is a way of buying bottled water fairly">About Us</a></li>
            <li><a href="products.htm" title="A wide selection of water based products">Products</a></li>
            <li><a href="faq.htm" title="What is Charity Water?  Where does the money go?">FAQ</a></li>
            <li><a href="contact.htm" title="Contact information for Charity Water">Contact</a></li>
        </ul>
    </nav>
</div>

<div class="drop" title="Plip!"></div>
<div class="drop" style="top:400px;" title="Plop!"></div>
</body>
</html>

CSS 

body 
{
    background:#E0E4CC;
    background-image: url(images/background.png);
    background-repeat:repeat-x;
    margin:0;
    padding:0;
    font-family:Arial, Verdana;
    height: 100%;
}
html
{
    height:100%;
}
img
{
    border:0;
}
.main-wrapper
{
    width:818px;
    margin:0 auto;
    background-image: url(images/mainbox.png);
    height: 100%;
}
.main-content
{
    width:750px;
    margin:0 auto;
    background:white;
    text-align:center;
    height: 100%;
}
.content
{
    position:relative;
    top:130px;
    padding:0 20px 20px 20px;
    text-align:left;
    margin-bottom:50px;
}
.menu
{
    background:url(images/menu.png);
    width:781px;
    height:61px;
    position:absolute;
    left:50%;
    margin-left:-391px;
    top:160px;
}
.menu ul
{
    list-style:none;
    margin-left:20px;
}
.menu ul li
{
    float:left;
    font-size:22px;
    position:relative;
    top:-12px;
    margin-right:40px;
}
.menu ul li a
{
    color:White;
    text-decoration:none;
    text-shadow: 1px 1px #5EBCCF;    
    position:relative;
    top:19px;
}
.selected
{
    text-align:center;
    width:120px;
    height:77px;
    background-image:url(images/bubble.png);
    position:absolute;
    background-position: 0 0px;
    background-repeat:no-repeat;
}
.selected a
{
    text-shadow: 1px 1px #E05E00 !important;     
}
h1
{
    color:#5EBCCF;
    font-size:43px;
    font-weight:normal;
    text-shadow: 1px 1px #C9CCB7;    
}
h2
{
    color:#5EBCCF;
    font-size:23px;
    font-weight:normal;
    text-shadow: 1px 1px #C9CCB7;
    padding-left:20px;
}
p
{
    width:550px;
    font-size:17px;
    margin: 0 auto;
}
.drop
{
    width:33px;
    height:68px;
    background-image: url(images/drop.png);
    position:absolute;
    left:50%;
    margin-left:320px;
    top:200px;
}
.logo
{
    position:relative;
    top:30px;
}

任何帮助表示赞赏！

5 个答案:

答案 0 :(得分：2)

我建议放弃尝试使其作为正文背景图像工作，而是创建一个图像并使用position：fixed和z-index属性来伪造它，就像这位绅士建议：http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

答案 1 :(得分：1)

我删除了“身高：100％;”从“main-wrapper”和“main-content”这个类开始看起来很好，至少在firefox下...我不确定你的其他页面的内容是什么。

答案 2 :(得分：0)

取消主要内容和主要包装的100％高度：

.main-wrapper
{
    width:818px;
    margin:0 auto;
    background-image: url(images/mainbox.png);
    /* height: 100%; */
}
.main-content
{
    width:750px;
    margin:0 auto;
    background:white;
    text-align:center;
    /* height: 100%; */
}

答案 3 :(得分：0)

body 
{
    background:#E0E4CC;
    background-image: url(../images/background.png);
    background-repeat:repeat-x;
    margin:0;
    padding:0;
    font-family:Arial, Verdana;

}
html
{
    height:100%;
}
img
{
    border:0;
}
.main-wrapper
{
    width:818px;
    margin:0 auto;
    background-image: url(../images/mainbox.png);
    height: 100%;
}
.main-content
{
    width:750px;
    margin:0 auto;
    background:white;
    text-align:center;
    height: 100%;
}
.content
{
    position:relative;
    top:130px;
    padding:0 20px 20px 20px;
    text-align:left;
    margin-bottom:50px;
}
.menu
{
    background:url(../images/menu.png);
    width:781px;
    height:61px;
    position:absolute;
    left:50%;
    margin-left:-391px;
    top:160px;
}
.menu ul
{
    list-style:none;
    margin-left:20px;
}
.menu ul li
{
    float:left;
    font-size:22px;
    position:relative;
    top:-12px;
    margin-right:40px;
}
.menu ul li a
{
    color:White;
    text-decoration:none;
    text-shadow: 1px 1px #5EBCCF;    
    position:relative;
    top:19px;
}
.selected
{
    text-align:center;
    width:120px;
    height:77px;
    background-image:url(../images/bubble.png);
    position:absolute;
    background-position: 0 0px;
    background-repeat:no-repeat;
}
.selected a
{
    text-shadow: 1px 1px #E05E00 !important;     
}
h1
{
    color:#5EBCCF;
    font-size:43px;
    font-weight:normal;
    text-shadow: 1px 1px #C9CCB7;    
}
h2
{
    color:#5EBCCF;
    font-size:23px;
    font-weight:normal;
    text-shadow: 1px 1px #C9CCB7;
    padding-left:20px;
}
p
{
    width:550px;
    font-size:17px;
    margin: 0 auto;
}
.drop
{
    width:33px;
    height:68px;
    background-image: url(../images/drop.png);
    position:absolute;
    left:50%;
    margin-left:320px;
    top:200px;
}
.logo
{
    position:relative;
    top:30px;
}

答案 4 :(得分：0)

从身体上移除身高 会喜欢这个

体 {     背景：＃E0E4CC;     background-image：url（../ images / background.png）;     背景重复：重复-X;     余量：0;     填充：0;     font-family：Arial，Verdana;

}

相关问题
最新问题