Prevent horizontal scrolling of background image

I have a page background image that must be aligned precisely in or开发者_运维技巧der 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:

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

Any suggestions would be greatly appreciated!

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.

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;
}