CSS的背景图片越来越重复

Question

我有一个div，其中包含来自CSS的背景图片。根据我的需要，我必须在77px;之后显示该div 77px; 因此，我添加了padding-top:77px; 在我的CSS中，但背景图片没有低于或低于77像素； 如果我要添加background-repeat: no-repeat; 然后剩下77px； 在Div中向下移动，再次仅从顶部进入。

这是HTML ..

 <div class="header-wrapper">
 //Header Div
 </div>
 <div id="headerbodyimage" class="headerbody-wrapper">
  //Header body Div
  </div>

这是CSS。

.header-wrapper {
position:fixed;
background: url("../img/new_images/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;     
width: 100%;
height: 77px;
}

.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
z-index: 60001; 
padding-top:77px;
width: 960px;
height: 242px;    
margin: 0 auto;
}

请帮助我..谢谢

Answer 1

使用background-position: 0 77px;

Answer 2

与其他响应不同的方法是，因为您将标头包装器使用固定位置，因此可以为父容器（例如，主体）设置填充顶部：

body {padding-top: 77px}

离开头枕包装纸：

.headerbody-wrapper {
background: url("../img/new_images/banner.jpg");
    z-index: 60001; 
    width: 960px;
    height: 242px;    
    margin: 0 auto;
}

我本来要准备一个pastebin示例，但没有您的真实图像。

Answer 3

请检查这个小提琴

.header-wrapper {
position:fixed;
background: url("http://eshbeata.com/images/backgrounds/header_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
z-index: 60001;     
width: 100%;
height: 77px;
}

.headerbody-wrapper {
background: url("http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg");
z-index: 60001; 
padding-top:77px;
width: 960px;
height: 242px;    
margin: 0 auto;
}

我已经解决了您的问题。这两张图片都可以正确显示。现在您可以使用背景位置属性以所需的方式对其进行定位。