首页 文章

自动扩展背景图像

提问于
浏览 次
1

我正在尝试使用图像作为我的背景 . 页面内容的高度为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;
    }
html css image background

2 回答

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

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

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

    回复于
  • 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 px .

    回复于

相关问题