Question

我有一个包含来自css的背景图片的div。根据我的需要，我必须在顶部77px;后显示此div。所以我在我的CSS中添加了padding-top:77px;但是背景图像不会低于或低于77px;相反，它只是来自顶部并且重复。如果我添加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;
}

请帮助我..THanks

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

请检查此fiddle

.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;
}

我已经解决了你的问题。图像正常运行。现在你可以按照你想要的方式使用背景位置属性来定位它。

背景CSS中的图像正在重复

3 个答案: