Question

无论窗口大小如何，我都使用以下代码来实现整页背景。

CSS

 #header_logo {
   position: absolute;
   z-index: -999;
 }

 #header_logo img {
   min-height: 100%;
   min-width: 1024px;
   width: 100%;
   height: auto;
   position: fixed;
   top: 0;
   left: 0;
 }

 @media screen and (max-width: 1024px) {
   #header_logo img {
     left: 50%;
     margin-left: -512px !important;
   }
 }

 .main {
   background-color: #efefef;
   display: block;
 }

HTML

<div id="header-wrapper">
  <table class="header" cellspacing="0">
    <tr>
      <td id="header_logo" class="center middle"><img src="background_image.png">
      </td>
    </tr>
  </table>
</div> 
<div class="main select-items">
...
</div>

但是，图像的中心有一个徽标，随着背景的其余部分缩小/增长，徽标隐藏在我在页面中设置的div后面。如果我设置margin的{{1}}以允许徽标在较大的窗口大小上显示足够的空间，则会在较小的窗口大小上创建过多的负空间。有没有办法让div值与背景图像一起调整？

注意：

1）由于托管/平台限制，我无法使用Javascript。我也无法编辑HTML 2）该站点是多个公司的Web门户，基于登录凭据，我可以更改将显示的背景。但是，我只能更改单个margin-top标记，这意味着公司的徽标和背景必须是单个图像文件。否则，我只会将徽标添加为不受背景更改影响的单独图像。

如何使用整页背景进行margin-top调整？

0 个答案: