タイトルがほとんどを物語っています。すべてのサイト div と背景を保持する div コンテナーがあります。画面を最大から外した場合、または別のモニター サイズ/ピクセル上にある場合 (画面いっぱいにならない作業中のコンピューターがありますが、私のワイドスクリーンはおよび他のほとんどの場合)。また、最大画面から取り出すと、サイトの一部が切り取られますが、その理由はわかりません.
関連する CSS:
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: lightsteelblue;
font-size: 14px;
background-image: url("../images/hardcoregames-bg-final.png");
-webkit-background-size: 100%; /*for webKit*/
-moz-background-size: 100%; /*Mozilla*/
-o-background-size: 100%; /*opera*/
background-size: 100%; /*generic*/
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
}
#maindiv {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#navigation {
position: absolute;
top: 50px;
/*left: 360px;
margin: 0px;*/
left: 50%;
margin-left: -325px;
z-index: 10000;
width: 650px;
height: 100px;
padding: 50px 20px;
background-color: transparent;
float: left;
}
そして、私のマークアップは単純です:
<body>
<div id="maindiv">
<div id="navigation">
<img src="images/hardcoregames-logo1.png"></img>
</div>
<div id="other divs just like navigation but positioned in different spots">
stuff
</div>
</div>
<body>
実際の動作を確認するには:サイト background-size で幅と高さの両方に 100% を使用してみましたが、高さが auto でない場合はさらに悪化しました。メインのdivを絶対として入れてみました。background-size を使用してカバーしようとしました。追加するには、これについてここで他のものを見てきましたが、これまで読んだアイデアはどれもうまくいきませんでした。背景を修正したくありません。画像はメインページと同じくらい大きいので、その通りです。
PS 少なくとも IE の最大化画面から抜け出すと、「maindiv」もカットされることを思い出してください。どちらも幅/高さに関係していると思うので、背景の問題を追加しましたが、やはりわかりません。投稿したコードは、画面のサイズを十分に小さくしてから右にスクロールするまで、正しく機能します。また、ほぼ同じサイズのIE画面では、サイトの左端まで行くことができなくなり、途切れてしまいます。
左右いっぱいにスクロールして表示される画像。右にスクロールすると、ページの 1/3 が切り取られます。右にスクロールすると、背景が完全に埋まらず、見栄えが悪くなります。写真