文章/答案/技术大牛

发布

社区首页 >问答首页 >与<body>一样大的全屏<div>

问与<body>一样大的全屏<div>
EN

Stack Overflow用户

提问于 2016-06-19 20:11:06

回答 4查看 75关注 0票数 0

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

我当前的CSS代码总是将框限制为Boddy，但我想要全宽。

另外，我想在盒子里放一张背景图片。

有人能帮我吗？

我的CSS：

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

css

回答 4

Stack Overflow用户

发布于 2016-06-19 20:18:16

是不是有什么东西阻止你把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;
}

票数 0

Stack Overflow用户

发布于 2016-06-19 21:13:00

使用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;    
}

票数 0

Stack Overflow用户

发布于 2016-06-19 22:10:07

div.bg {
background-image: url("LINK TO PIC");
background-repeat: no-repeat;
background-size: cover;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: auto;
z-index: 9;}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37907093

复制

相似问题

问与<body>一样大的全屏<div>
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与<body>一样大的全屏<div>EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与<body>一样大的全屏<div>
EN