Question

我的问题是特定于背景图片。我已经将背景图像应用到身体并使其水平居中。对于每个页面，我将在标题下方添加一个段落，每个段落将有不同的大小，从而导致滚动。背景图像必须在段落后面流动，但我不能使body标签扩展以包含段落，这意味着当您向下滚动时背景图像会被切断。我不想设置特定的高度，因为这会使页面滚动超出段落。我已经尝试了几乎我能想到的位置相对/绝对和高度/最小高度的每个组合。

<html>
    <body>
        <div class="paragraph">
            <p>text!</p>
        </div
</html>

CSS

html {
    background:             url('/images/bg.png');
    margin:                 0;
    padding:                0;
    height:                 100%;
    min-height:             100%;
}

body {
    margin:                 0;
    padding:                0 0 50px 0;
    background-image:       url('../images/fullheader.gif');
    background-position:    center 20px;
    background-repeat:      no-repeat;
    position:               absolute;
    top:                    0px;
    bottom:                 0px;
    right:                  0px;
    left:                   0px;
    min-height:             100%;
}

.paragraph {
    width:                  640px;
    padding:                10px 20px;
    margin:                 400px auto 0 auto;
    min-height:             100%;
}

如果有帮助，我可以发布截屏。

Answer 1

将css添加到此身体

       body {
             background:#fff url(background.jpg) repeat-y top center;
             margin:0px;
             padding:0px;
            }

Answer 2

如果垂直重复不是一个选项而你的bg图像当然不能无穷无尽，我认为在一些滚动后不切断图像的唯一方法是修复它的位置：

body {
    background-attachment: fixed;
}

不，可能有另一种解决方案，但在大多数情况下这看起来不太好：设置background-size，例如：

body {
    background-size: contain;
}

Answer 3

如果您的目标是保持背景的高度足以覆盖段落的大小，并且限制为不重复且不会扭曲方面无线电，则会有简单干净的解决方案在body标签中找到背景。将其大小设置为水平尺寸的自动尺寸和高度的100％由身体包含的段落将推动身高，这将推动你的背景高度而不会扭曲纵横比

body {
    width:100%; <!-- or what ever.....-->
    background:url("whatever.jpg") no-repeat;
    background-size:auto 100%;
}

这是fiddle给你的。我使用维基百科图片。玩它修改段落的数量等...希望它有所帮助

扩展div超出屏幕大小

3 个答案: