背景图像全尺寸

我将从浏览器中设置一个全尺寸的背景图像。网站向下滚动，图片正常向上滚动。

观看链接：http://cnation.co

我添加了这个：

#header {
    background: rgba(0, 0, 0, 0) url("../images/head.jpg") repeat scroll 0 0 / cover ;
    font-size: 0.1px;
    height: 100%;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 9;
}

但这不起作用我该怎么做？

不太确定你在说什么，但可以试试CSS:

#header {
/*your code here*/
background-size:100% 100%;
}

Zack是对的。使用位置：固定。此外，考虑使用类似id的#背景图像，而不是#header。这里有一个你可以做什么的例子。

#background-image {
    background: rgba(0, 0, 0, 0) url("../images/head.jpg") center cover;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;     
    left: 0;
    width: 100%;
    height: 100%;
}

在CSS中添加背景大小，这将适用于所有浏览器：

background: rgba(0, 0, 0, 0) url("../images/head.jpg") repeat scroll 0 0 / cover;
background-size: 100% auto;

相关内容

最新更新

热门标签：