Question

我正在尝试将图片显示为我网站的背景，因此我使用以下代码

HTML：

<div>
     <img src="images/background.jpg" id="bg" alt="background_image" />
</div>

的CSS：

#bg {
    width: 100%;
    height: 75%;
    position: absolute;
    z-index: -5000;
}

我想知道如何限制背景的大小，因为我不希望它延伸超过2000px。

由于

Answer 1

我会使用以下css：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

并完全删除你的div。

要限制尺寸：

#bg {
    min-height: 100%;
    max-width: 2000px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    bottom: 0;
}

Answer 2

只需在CSS中包含max-width。

 #bg {
    width: 100%;
    max-width: 2000px;
    height: 75%;
    position: absolute;
    z-index: -5000;
}

Answer 3

您可以使用max-width

#bg {
    width: 100%;
    height: 75%;
    position: absolute;
    z-index: -5000;

    max-width: 2000px; /* use this to limit the maximum width */
}

Answer 4

我还没有测试过，但是将max-width:2000px;添加到#bg选择器。

Answer 5

试试这个

#bg {
width: 100%;
height: 100%%;
background-size:100%;
}

全屏幕背景HTML

5 个答案: