背景画像の水平スクロールを防止する

Question

フレームの背景画像と調整するために、ページの背景画像を正確に配置する必要があります（ページとフレームの上に同じ画像が表示されるようになります）。 Here is what it looks like（植物イメージに注意してください）。

問題は、ページの背景イメージが水平スクロールバーを表示していることです。ウィンドウがフレームよりも小さい場合（#main_frame）に水平スクロールバーを表示し、ウィンドウがページの背景イメージより小さい場合は表示しません。ここで

は（と思う）が関連していること（SASS）CSSです：

#main_frame 
    -webkit-border-radius: 25px 
    -moz-border-radius: 25px 
    border-radius: 25px 
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.7) 
    -moz-box-shadow: 10px 10px 10px 0px #706270 
    box-shadow: 10px 10px 10px 0px #706270 
    -webkit-box-sizing: border-box 
    -moz-box-sizing: border-box 
    box-sizing: border-box 
    background-color: white 
    border-style: solid 
    border-color: black 
    border-width: 2px 
    width: 950px 
    margin: 50px auto 
    height: 800px 
    background: #fff url(../images/plant_white.jpg) 560px -95px no-repeat 

#plantBackgroundHolder 
    width: 1200px 
    height: 900px 
    background: #ffc url(../images/plant_yellow.jpg) 690px -40px no-repeat 
    position: absolute 
    z-index: -1 
    top: 0 
    margin-left: -600px 
    left: 50% 

そしてHTML：

<div id="plantBackgroundHolder"> 
    <div id="main_frame"> 
    ... 
    </div> 
</div> 

私はそれがあること#plantBackgroundHolderの幅はかなり確信しています水平スクロールバーが表示されています。しかし、私がそれを取り除くと、背景イメージがずれる。

背景情報：

1. The original solution for making a transparent overlay effect
2. The site with the problem
3. The repo of the site

任意の提案をいただければ幸いです！

Answer 1

あなたはCSSの高さを宣言していますが、それを削除する必要があります。固定高さを設定するのではなく自由に高さを流す必要があります。ここで私は見つけることができる場所です。

body { height: 1000px } // remove height, also width!!! 
#plantBackgroundHolder { height: 900px } // remove height 

また、あなたが#main_frame IDに設定した余白を削除し、div要素の下に設定したマージンを削除するには10px auto 0のようなものに設定します。

また、htmlタグからこれを削除すると、強制的にページにスクロールが表示されます。

html { overflow-y: scroll } 

注：あなたは、頻繁にあなたのコードを修正する必要がありますが正しくdivを入れ子にしていないと、あなたは簡単にあなたが今持っているものの半分以下と同じ効果を得ることができます。

Answer 2

2つの画像を整列させる作業は、あなたを襲うために戻ってくる可能性があります。 1つの方法は、透明な背景を有する単一の画像を使用することである。アルファ透明度を持つPNGはIE6以降で動作します（more info）。

コンテンツの背後にある白い背景とコンテンツの周りの境界線の間にpngを挟みます。例はJSFiddleです。

/* Container provides (yellow) background behind the image */ 
#main_frame_container { 
    position: relative; 

    border-radius: 25px; 
    margin: 50px auto; 
    width: 300px; 
    background-color: yellow; 
} 

/* Position the "background" image */ 
#background_image { 
    position: absolute; 
    right: -10px; 
    top: -10px; 

    width: 100px; 
} 
/* Main content over both the (yellow) background and image */ 
#main_frame { 
    position: relative; 
    border-radius: 25px; 
    border: solid black 2px; 
    padding: 20px; 
} 

body { 
    background-color: pink; 
}