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) このサイトは複数の企業の Web ポータルであり、ログイン資格情報に基づいて、表示される背景を変更できます。ただし、変更できるimgタグは 1 つだけです。つまり、会社のロゴと背景は 1 つの画像ファイルでなければなりません。それ以外の場合は、背景の変更の影響を受けない別の画像としてロゴを追加するだけです。

4

0 に答える 0