Question

我正在尝试将图像用于我的背景。页面内容的高度为800px。因此，在高大的屏幕上，您应该能够在内容之后看到一大块背景图像，并且在较短的屏幕上它可以完美地适合，以便内容在屏幕的底部结束，下面几乎没有背景图像。

我希望背景图像能够自动延伸，因此无论屏幕大小如何，它都会填满整个屏幕。我尝试过几个方面，比如将img.extfullbackground的高度设置为auto，但滚动区域为WAY to far down（如3000px），100％仅达到内容的大小。

有谁知道如何让背景图像自动延伸到屏幕大小？

以下是我的HTML代码段：

</head>

<body class="extfullbackground">
    <img class="extfullbackground" src=".\background.png" alt="background" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src=".\pf_logo.png" alt="PF Logo"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">PF is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1220px; height:600px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto; background-color:blue;">
        <div class="extcontentcontainer">
        <h2 class="subtitle">Please be patient while we update PF.</h2>
            <p class="pad10 line10">

这是我的CSS :(注意：我使用了CSS重置脚本）

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow-x:hidden;
}

.extcontentcontainer {
    width:820px;
    height:600px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    background-color:red;
}

    img.extfullbackground {
        position:absolute;
        z-index:-1;
        top:0;
        left:0;
        width:100%; /* alternative: right:0; */
        height:auto; /* alternative: bottom:0; */
        padding-left:0px;
        padding-right:0px;
        margin-left:0px;
        margin-right:0px;
    }

Answer 1

body {
    background: url('background.png');
    background-size: cover;
}

这在IE8上对我有用。（它是我的iMac上的模拟器）

另外：为什么不将图像高度设置为100％而不设置宽度。图像应保持其比例并延伸以覆盖浏览器的整个高度。

Answer 2

你应该试试这个（html）：

<img src="bg.jpg" class="bg" alt="achtergrond">

的CSS：

img.bg {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index:-999;
    pointer-events: none;
}
@media screen and (max-width: 1024px) {
    img.bg {
        left: 50%;
        margin-left: -512px;
        pointer-events: none;
    }
}

当屏幕宽度超过1024时，这会将背景拉伸到填充屏幕，而当屏幕宽度超过1024时，它会保持1024 px。

自动扩展背景图像

2 个答案: