0

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

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为div允许徽标在较大的窗口尺寸上出现足够的空间，则会在较小的窗口尺寸上产生过多的负空间。有没有办法margin-top用背景图像调整值？

笔记：

1) 由于托管/平台限制，我无法使用 Javascript。我也无法编辑 HTML。
2)该网站是多个公司的门户网站，根据登录凭据，我可以更改将出现的背景。但是，我只能更改单个img标签，这意味着公司的徽标和背景必须是单个图像文件。否则，我只需将徽标添加为不受背景更改影响的单独图像。

4

0 回答 0