Фоновое изображение оболочки обрезается сверху - PullRequest
Новая
       15

Фоновое изображение оболочки обрезается сверху

0 голосов
/ 25 марта 2012

На моем сайте есть обертка с тремя фоновыми изображениями. Статическое верхнее и нижнее изображение и третье изображение, которое повторяется вдоль оси y. По какой-то причине верхнее фоновое изображение обрезается, и я не могу понять, как это сделать.

Вот ссылка на живой сайт: http://storrepictures.weebly.com/projects.html

Я сместил верхнее и нижнее изображения, чтобы вы могли видеть, как они выглядят. Вы можете видеть, что верхний отрезан. Я пробовал возиться с некоторыми настройками отступов div, но не могу заставить его работать.

Одно интересное примечание: фоновые изображения раньше были в формате JPEG (я переключился на файлы PNG, потому что мне нужна была прозрачность). Когда я использовал JPEG, это не было проблемой - три изображения идеально выровнялись.

Дайте мне знать, если это поможет опубликовать фактический код. Из того, что я читал на этом форуме, людям, похоже, нравится смотреть на живой сайт, и я не хотел делать пост слишком длинным.

Большое спасибо за вашу помощь.

* Вот CSS: 

body {

background: #ffffff;
font-family: Tahoma, arial, sans-serif;
font-size:12px;
color:#666666;
margin: 0;
padding: 0;
}


#wrapper {
    background: url(containerbg.png) center repeat-y;

}

#wrappertop{
background: url(containertop.png) no-repeat;
background-position: 0px -40px; 
}

#wrappertbtm{
background: url(containerbtm.png)   no-repeat;
background-position: 34px 480px;
padding-bottom: 65px;
}
.title{
width: 1022px;
min-height: 30px;
_height: 30px;
padding: 10px 0px 10px 0px;
font-size: 30px;
}

.title, .title a {
color: #fff;
}


#container {
width: 100%;
position: relative;
top: 125px;
bottom: 0px;
margin: 0px;
padding: -300px 0px 0px 0px;
}

#content{
width: 800px;
min-height: 500px;
_height: 500px;
margin: 0pt auto;

}

#content a{
color: #ff6633;
text-decoration: none;
}
.weebly_header{
background: url(%%HEADERIMG%%) no-repeat;
}

А вот и HTML: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>{title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 7]> 
<style>
    #content
{
    height:400px !important;
} 
</style>
<![endif]-->
</head>
<body class="wsite-theme-light">
    <div id="wrapper">
      <div id="wrappertop">
        <div id="wrappertbtm">
            <div id="container">
                 <div id="header">
                   <div id="headerleft">{logo max-height="60"}</div>
                   <div id="navigation">{menu}</div>        
             </div> 


        <div id="content">{content}
            <div id="footer">{footer}

            </div>
            </div>
            </div>
            </div>
            </div>
</div> 
</div>

1 Ответ

0 голосов
/ 25 марта 2012

Из того, что я вижу, ваш body элемент имеет padding и margin значения, мешающие: 

body {
    background: url(theme/backgroundtop.jpg?909894) left top repeat-x, 
        url(theme/backgroundbottom.jpg?909894) left bottom repeat-x, 
        url(theme/backgroundmid.jpg?909894) left repeat;
    font-family: Tahoma, arial, sans-serif;
    font-size: 12px;
    color: #666666;
    height: 100%;
    margin: 100px 0 0 0;
    padding: 100px 0 0 0;
}

Вы должны избавиться от этих правил: 

body {
    /* ... */
    margin: 0;
    padding: 0;
}

и все должно быть в порядке.

Примечание: установка height: 100% для элемента body не имеет смысла, вы также можете удалить это.

Примечание # 2: у вас есть только 3 значения для нескольких фонов тела, которые будут проанализированы как T / LR / B, в то время как порядок или эти значения указывают, что вы должны изменить их порядок, то есть backgroundtop / backgroundmid / backgroundbottom вместо backgroundtop / backgroundbottom / backgroundmid

...