Question

我想创建一个覆盖整个屏幕宽度的框，因此始终响应全屏宽度。

我目前的CSS代码总是将盒子限制在Boddy，但我想要全宽。

另外，我想要一个背景图片。

有人可以帮助我吗？

我的CSS：

div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;}

Answer 1

是否存在阻止您将div设为position:fixed的内容？

如果没有，那很简单：

div.bg 
{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;

    background-image: url("LINK TO PIC");
    background-repeat: no-repeat;
    background-size: cover;
}

Answer 2

使用Viewport units: vw, vh, vmin, vmax

div.bg {
    background-image: url("LINK TO PIC");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;    
}

全屏<div>大如

4 个答案: