Prevent horizontal scrolling of background image - html

Question

I have a page background image that must be aligned precisely in order to coordinate with the background image of a frame (so it looks like the same image over page and frame). Here is what it looks like (note the plant image).
The problem is that the page background image is making the horizontal scroll bar appear. I want the horizontal scroll bar to appear when the window is smaller than the frame (#main_frame), not when the window is smaller than the page background image.
Here is the (SASS) CSS that (I think) is relevant:
#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%
And the HTML:
<div id="plantBackgroundHolder">
<div id="main_frame">
...
</div>
</div>
I'm pretty sure it's the width of the #plantBackgroundHolder that is causing the horizontal scroll bar to appear; but if I remove that, the background image gets shifted around.
Background information:
The original solution for making a transparent overlay effect
The site with the problem
The repo of the site
Any suggestions would be greatly appreciated!

Answer 1

You're declaring a height here and there on your CSS, you need to remove that, you need to let the height flow freely instead of setting a fixed height. Here are the places i could find:
body { height: 1000px } // remove height, also width!!!
#plantBackgroundHolder { height: 900px } // remove height
Moreover, remove the margin that you have set on the #main_frame id and set it to something like 10px auto 0 to remove the margin you have set on the bottom of the div.
Also, remove this from your html tag, you're forcing the scroll to appear on the page;
html { overflow-y: scroll }
Note: you need to heavily revise your code, you're not properly nesting your divs and you can easily achieve the same effect with less than half of what you have now.

Answer 2

Working to align the two images might keep coming back to haunt you. One approach is to use a single image with a transparent background. PNG's with alpha transparency work since IE6 (more info).
Sandwich the png between the white background behind the content and the border around the content. Here is an example 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;
}