带滚动条的背景图片

Question

我有一个小新手问题：我需要将图像作为网站的背景图像。它需要显示整个图像。用户需要有向下滚动的选项。这是我写的，它确实显示了滚动条，但它没有滚动。图片很大

    <html>
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body {
            background-image: url("OPL2013.gif"); /* Change Image URL */
            background-repeat: no-repeat; /* Keep it */
            background-position: 50% 0; /* position to center */
            background-attachment: fixed; /* For Scrolling bars */
            height: 100%;
            min-height:100%;

        }
    </style>
</head>
<body dir="rtl" align="center">
</body>
</html>

**图像为 970X1200 像素

Answer 1

通过设置背景图片，您只需将图片应用到可见区域（由应用它的元素确定）。

因此，您可能希望将图像作为 img 元素添加到您的 body 中，或者将 body 本身的尺寸明确设置为图像的尺寸.

滚动条不显示的原因是它们是由元素的溢出决定的，而溢出是由元素的内容决定的。背景属性不代表传播到元素的内容，因此它不会影响溢出，从而导致滚动条出现。这就是为什么您需要更改元素的尺寸以在其父级上创建溢出，或者将图像应用为 img 的 src 来执行相同的操作。

带滚动条的背景图片

background image with scrollbars

html

css

background

background-image