背景イメージが#wrap divを超過します

Question

私は属性が{margin：0 auto; }

私の表紙の画像は、幅（＃折り返しを超えています）と高さが780pxのすべての本体を撮影する必要があります。

#cover divが中央の#wrap divの内側にあるため、イメージは左端の絶対点0で開始しません。

この問題を解決するにはどうすればよいですか？

マイHTML：

<div id="wrap"> 

    <div id="cover"></div> 

</div> 

マイCSS：

#wrap { 
    width: 960px; 
    margin: 0 auto; 
} 

#cover { 
     background-image: url(bg.jpg); 
     background-attachment: fixed; 
     background-clip: border-box; 
     background-position: center; 
     background-repeat: no-repeat; 
     background-size: cover; 
     height: 780px; 
     z-index: -10; 
    } 

Answer 1

そのあなたが達成しようとしているかは不明。問題の説明からのように聞こえますが、のように、固定幅の全角背景が必要です。これを達成する方法はたくさんあります。この場合は、#coverを絶対配置し、100％幅と固定高さを780pxとする必要があります。

この例ではパーセンテージを使用しています。純粋にスニペットウィンドウの方が適しています。また、#wrapの背を高くして、半透明の背景色を指定して、#cover背景の固定された性質を確認することができます。 FYI

html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    min-height: 100%; 
 
} 
 
#wrap { 
 
    width: 80%; 
 
    height: 120%; 
 
    margin: 0 auto; 
 
    background: rgba(0, 0, 0, 0.1); 
 
    z-index: 1; 
 
} 
 
#cover { 
 
    background-image: url(https://placekitten.com/300/300); 
 
    background-attachment: fixed; 
 
    background-clip: border-box; 
 
    background-position: top left; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    width: 100%; 
 
    height: 78%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: -10; 
 
}

<div id="wrap"> 
 
<div id="cover"></div> 
 
    Lorem ipsum sed diam eget risus varius blandit sit amet non magna. 
 
</div>

。コードを明確にするために、何らかの形でそれがバインドされることを望んでいる/期待しない限り、の中に#cover要素を入れてはいけません。あなたのケースでは、#coverと#wrapの要素は、の部分だけでなくページ全体の背景になると考えられているため、位置的に無関係です。私は分かりやすくするためにそれを移動したいが、修正は関係なく同じである。

Answer 2

あなたの背景の位置は、あなたがbackground-position: top leftないcenterを設定する必要があるのx = 0かつy = 0からであるようにしたい場合。 background-size: coverでは、バックグラウンドがすべてのdivをカバーする必要があることを伝えているので、左の位置では、右と下から部品を緩めることができます。

ソリューション：

#cover { 
    background-position: top left; 
}