Html 在屏幕中心以77像素的高度显示图像；

我设计了一个网页。顶部是标题，高度为

高度：77px

。在标题之后，我想在屏幕中央添加一个宽度为

宽度：960px的图像。现在我面临的问题是，图像来自标题内部的顶部，这意味着第二个图像来自顶部，而我需要在77px的高度之后显示

这是HTML

 <div id="headerbodyimage" style="width: 960px; margin-top: 77px;  margin: 0 auto;" class="headerbody-wrapper">

 </div>

我试图更改
位置
，但它正在折叠整个页面

这是我的html头代码

 <div class="header-wrapper">
 </div>

请帮帮我

headerbody-wrapper {
    background: url("../images/banner.jpg");
    height: 242px;
   position: inherit;
   width: 100%;
   z-index: 60001; 
  background-positon:xxx;
 }

带有
边距的：0自动
在
样式
属性中覆盖
页边距顶部：77px<代码>边距：0自动
是
页边距顶部的缩写：0；右边距：自动；页边距底部：0；左边距：自动。配合：

这里有一个

HTML:

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

边缘顶部：77px；页边距：0自动；？您正在覆盖页边距顶部属性。尝试保证金：77px自动0px自动；我尝试了你的代码，但它使顶部标题与77px和标题正文图像是77px内的顶部标题图像我已经更新了我的文章与标题代码..请参阅和帮助me@user3699193
是在
内还是在
下？这就是为什么会出现这个问题的原因，先生？
headerbody-wrapper {
    background: url("../images/banner.jpg");
    height: 242px;
   position: inherit;
   width: 100%;
   z-index: 60001; 
  background-positon:xxx;
 }

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

.header-wrapper {    
    z-index: 60001;     
    width: 100%;
    height: 77px;
    margin: 0 auto;
    background: url("http://placehold.it/77x77") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
}

.headerbody-wrapper {    
    z-index: 60001; 
    background: url("http://placehold.it/960x242");
    width: 960px;
    height: 242px;    
    margin: 0 auto;
}