div内の背景画像を修正する方法

StackOverflow https://stackoverflow.com/questions/3534441

  •  30-09-2019
  •  | 
  •  

質問

私はかなり奇妙な問題を発見しましたが、説明する方法を知っていると思います。私はそれを修正する方法がわからないだけです！

ヘッダー、「ページコンテンツ」、フッターを含む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 サポートされ、非常に便利です。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top