ウィンドウのサイズに関係なく、次のコードを使用してページ全体の背景を実現しています。
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 つの画像ファイルでなければなりません。それ以外の場合は、背景の変更の影響を受けない別の画像としてロゴを追加するだけです。