防止背景图像的水平滚动

我有一个页面背景图像必须精确对齐，以便与一个框架的背景图像进行协调（所以它看起来像在页面和框架上的相同图像）。 Here is what it looks like（注意植物图像）。防止背景图像的水平滚动

问题是页面背景图像正在使水平滚动条出现。当窗口小于框架（＃主框架）时，我希望水平滚动条出现，而不是当窗口小于页面背景图像时。

这里是（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的宽度导致水平滚动条出现;但如果我删除它，背景图像会转移。

背景资料：

任何建议，将不胜感激！

来源

2011-07-17 CuriousYogurt

你在你的CSS中声明一个高度，你需要删除它，你需要让高度自由流动，而不是设置一个固定的高度。这里有地方我可以找到：

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

此外，删除您对#main_frame ID设定的边距并将其设置为类似10px auto 0删除您对div的底部设置margin。

此外，从您的html标记中移除此标记，您将强制滚动显示在页面上;

html { overflow-y: scroll }

注意：你需要大量修改你的代码，你没有正确嵌套的div的，你可以很容易地用低于你现在的一半达到同样的效果。

来源

2011-07-17 03:34:09

谢谢你的回答。我实施了您的建议，但问题仍然存在（请参阅修订的回购）。任何其他想法？ – CuriousYogurt

您仍然需要修正#main_frame id的边距，您仍然在底部添加50像素，将其更改为像“10px auto 0”之类的内容，并且它应该修复该片段，您在底下的额外空间只是阴影效果你跨越整个盒子。 –

再次感谢您。更改#main_frame的边距确定了底部的位;但是当浏览器的窗口宽度小于#plantBackgroundHolder的背景时，如何停止出现水平滚动的问题仍然存在。这就是我想要解决的问题。也许没有办法解决这个问题？ – CuriousYogurt

对齐两个图像的工作可能会一直困扰着你。一种方法是使用具有透明背景的单个图像。自IE6以来，使用alpha透明度的PNG（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; 
}

来源

2012-12-04 19:45:06 Anson

防止背景图像的水平滚动

回答

相关问题