1

我正在尝试使用图像作为背景。页面内容的高度为 800px。因此，在高屏幕上，您应该能够在内容之后看到一大块背景图像，而在较短的屏幕上，它可能非常适合，这样内容就在屏幕底部结束，下面几乎没有背景图像。

我希望背景图像自动扩展，因此无论屏幕大小如何，它都会填满整个屏幕。我已经尝试了几件事，比如将高度设置为img.extfullbackground自动，但随后滚动区域会向下移动（如 3000 像素），并且 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;
    }
4

2 回答 2

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

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

否则：为什么不将图像高度设置为 100% 而宽度则不设置。图像应保持其比例并扩展到覆盖浏览器的整个高度。

于 2013-06-03T14:02:45.040 回答
0

你应该试试这个（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 像素。

于 2013-06-03T13:39:05.063 回答