web-dev-qa-db-ja.com

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

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

ヘッダー、「ページコンテンツ」、フッターを含むdiv＃container（100％の最小高さ（IEの高さ）を持つdiv）を持つページがあります。 div＃containerの背景画像は固定されているはずです（固定位置ではなくbackground-attachment: fixedで、スクロールすると画像が追従します）。

問題は、CSSのbackground-tagに修正された添付ファイルが追加されると、背景画像が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の右上には配置されません。

皆さんが私を助けてくれることを願っています！

csshtmlattachmentfixed
15
Latze

この動作は実際には正しいです。 attachment: fixedである背景は、それが適用される要素ではなく、ビューポートを基準にしています。これは実際には、Eric Meyerの Complex Spiral デモの基礎です。

12
Ryan Kinal

Div内で背景の位置を固定することはできませんが、最も簡単な解決策は、イメージのサイズのdivを作成することです。画像を背景にして、position:absoluteを使用して配置するdivの右上隅でright:0px;top:0pxに設定します。親divがposition:relativeであることを確認してください。そうしないと、そのdiv内に絶対的に配置されません。

4
Matt Healey

background-Origin プロパティ、おそらくborder-box値は問題を解決します。また、background-size、coverとcontainはサポートされており、非常に便利です。

1
guillaume