Запрет горизонтальной прокрутки фонового изображения

Question

У меня есть фоновое изображение страницы, которое должно быть точно выровнено, чтобы совпасть с фоновым изображением кадра (чтобы оно выглядело как одно и то же изображение на странице и в рамке). Вот как это выглядит (обратите внимание на изображение растения).

Проблема в том, что на фоновом изображении страницы появляется горизонтальная полоса прокрутки.Я хочу, чтобы горизонтальная полоса прокрутки появлялась, когда окно меньше, чем рамка (#main_frame), а не когда окно меньше фонового изображения страницы.

Вот CSS-код (SASS), который (я думаю,) имеет значение:

#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. Исходное решение для создания прозрачного эффекта наложения
2. Сайт с проблемой
3. Репо сайта

Любые предложения будут в значительной степениоценили!

Answer 1

Работа по выравниванию двух изображений может продолжать преследовать вас.Одним из подходов является использование одного изображения с прозрачным фоном.PNG с альфа-прозрачностью работают с IE6 ( больше информации ).

Сэндвич 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;
}

Answer 2

Вы декларируете высоту здесь и там в своем CSS, вам нужно удалить ее, вам нужно позволить высоте свободно течь вместо установки фиксированной высоты. Вот места, которые я мог бы найти:

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

Кроме того, удалите поле, установленное для идентификатора #main_frame, и установите для него значение, подобное 10px auto 0, чтобы удалить поле, установленное в нижней части элемента div.

Кроме того, удалите это из тега html, вы заставляете свиток появляться на странице;

html { overflow-y: scroll }

Примечание: вам нужно серьезно пересмотреть свой код, вы неправильно вкладываете свои div-ы, и вы можете легко добиться того же эффекта, используя менее половины того, что у вас есть сейчас.