防止背景图像的水平滚动

时间:2011-07-17 01:44:19

标签: html css html5 css3

我有一个页面背景图像,必须精确对齐才能与帧的背景图像协调(因此它看起来像页面和框架上的相同图像)。 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
  4. 任何建议都将不胜感激!

2 个答案:

答案 0 :(得分:0)

你要在CSS上声明一个高度,你需要移除它,你需要让高度自由流动而不是设置一个固定的高度。以下是我能找到的地方:

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

此外,删除您在#main_frame id上设置的边距,并将其设置为类似10px auto 0的内容,以删除您在div底部设置的边距。

另外,从html标记中删除此内容,即表示您正在强制滚动显示在页面上;

html { overflow-y: scroll }

注意:你需要对你的代码进行大量修改,你没有正确地嵌套你的div,你可以用不到你现有的一半来轻松实现同样的效果。

答案 1 :(得分:0)

对齐两张图片可能会一直困扰着你。一种方法是使用具有透明背景的单个图像。自IE6(more info)以来,PNG具有Alpha透明度。

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