HTML не может заставить фоновое изображение обернуться на 100% высоты - PullRequest
Новая
       6

HTML не может заставить фоновое изображение обернуться на 100% высоты

0 голосов
/ 27 марта 2011

Рабочий URL:

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

Я не могу заставить высоту фонового изображения растягиваться на 100% по вертикали, демонстрационный URL показывает это.

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 ]

2 голосов
/ 27 марта 2011

Я рекомендую отказаться от попыток заставить его работать как фоновое изображение тела, а вместо этого создать изображение и использовать свойство position: fixed и свойство z-index для его подделки, как этот джентльмен рекомендует: http://webdesign.about.com/od/css3/f/blfaqbgsize.htm

1 голос
/ 27 марта 2011

Я удалил "высота: 100%;" из классов "main-wrapper" и "main-content", и это выглядит хорошо, по крайней мере, под Firefox ... Я не уверен, что насчет остальных ваших страниц с меньшим содержанием.

0 голосов
/ 27 марта 2011

убрать высоту с тела будет нравится

корпус { фон: # E0E4CC; background-image: url (../ images / background.png); фон-повторить: повтор-х; Маржа: 0; обивка: 0; семейство шрифтов: Arial, Verdana;

}

0 голосов
/ 27 марта 2011 
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;
}
0 голосов
/ 27 марта 2011

принимает 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%; */
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...