質問
私はかなり奇妙な問題を発見しましたが、説明する方法を知っていると思います。私はそれを修正する方法がわからないだけです!
ヘッダー、「ページコンテンツ」、フッターを含むdiv#コンテナ(100%高さ(IEの高さ)を備えたDIV)を備えたページがあります。 Div#コンテナの背景画像は固定されているはずです(固定位置ではなく、 background-attachment: fixed
スクロールするときに写真をフォローします)。
問題は、CSSのバックグラウンドタグに固定添付ファイルが追加されると、背景画像がDivの外側に配置されることです。
CSSは次のとおりです。(なし background-attachment: fixed;
)
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
margin:0 auto;
Divとを中心にすることです !important
最初のもの height:
IEにその特定の高さタグを無視させることです。これが必要な場合 min-height: 100%
動作するはずです。
これを追加すると...
div#container {
position:relative;
width:900px;
margin:0 auto;
background-color: #ccffff;
background-image: url("pics/sign.jpg");
background-attachment: fixed; //This is what is added to the code-sample
background-repeat: no-repeat;
background-position: right top;
height:auto !important;
height:100%;
min-height:100%;
}
...背景画像はdivの外側に移動しています。これを説明させてください:背景画像の唯一の目に見える部分は、まだ中にあるものです <div id="container">
しかし、画像の一部はDivの外に移動しており、今では見えません。
総括する...
背景画像が修正されると、背景画像が部分的に非表示になり、Divの外側に移動します。画像は右上に配置されています ブラウザウィンドウ, 、divの右上ではありません。
皆さんが私を助けることができることを願っています!
解決
この動作は実際には正しいです。任意の背景 attachment: fixed
適用される要素ではなく、ビューポートに関連します。これは実際にはエリック・マイヤーの基礎です 複雑なスパイラル デモ。
他のヒント
DIV内に固定されたバックグラウンド位置を持つことはできませんが、最も簡単な解決策は、画像のサイズのDIVを作成することです。画像を背景にして、 position:absolute
divの右上隅にあなたがそれが使用することを望む right:0px;top:0px
. 。親divが必ずてください position:relative
または、そのdiv内に絶対に配置されません。
追加してみてください background-origin
財産、多分 border-box
価値はあなたの問題を解決します。また、定義したいと思うかもしれません background-size
, 、覚えておいてください cover
と contain
サポートされ、非常に便利です。