Html 使图像覆盖宽度（居中）

我想在我的头版上有一个新网站的图片，覆盖总宽度，并根据你的分辨率改变大小，但仍然保持水平居中

这是我目前正在工作的网站：我希望整个红色部分都覆盖在这张图片上：

我该怎么做？这是我想要图像的div的css代码：

.featured {
    background-color: red;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

我试过了，但没有成功：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg) no-repeat;
    width: 100%;
    height: 700px;
    size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

---

但这根本没有加载图像。如果没有

no repeat

，则图像覆盖了整个宽度，但它自己重复了。

试试这样做

.featured {
    background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
    background-size: cover;
    z-index: 1;
    }

---

试试这样做

.featured {
    background: url('http://jonathan.ohrstrom.nu/style/img/featured.jpg') no-repeat center center ;
    background-size: cover;
    z-index: 1;
    }

---

使用

背景图像：url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);背景大小：100%100%


/*GRUNDER*/
身体{
背景色：白色；
字体系列：verdana；
}
/*梅尼*/
.菜单包装{
宽度：100%；
高度：70像素；
背景色：rgba（45,45,45,9）；
左：0；
排名：0；
位置：固定；
z指数：99；
}
.菜单内容{
宽度：1000px；
左边距：自动；
右边距：自动；
/*背景色：红色*/
线高：70px；
颜色：#A0；
字体大小：400；
字体系列：“Roboto”，无衬线；
文本转换：大写；
}
.menu_标志{
浮动：左；
}
.菜单链接{
浮动：对；
}
a、 菜单{
颜色：#A0；
转换：.1s；
文字装饰：无；
}
a、 菜单：悬停{
颜色：#e5a000；
}
美努利斯特{
列表样式类型：无；
保证金：0；
填充：0；
}
李{
浮动：左；
显示：内联；
利润率：0.10px；
}
/*容器*/
.集装箱{
宽度：1000px；
左边距：自动；
右边距：自动；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
.特色{
背景图片：url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
背景大小：100%100%；
宽度：100%；
高度：700px；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}

Webutveckling！





$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（'[name=“'+$.attr（this，'href'）.substr（1）+'“]'））.offset（）.top
}, 500);
返回false；
});
使用
背景图像：url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);背景大小：100%100%


/*GRUNDER*/
身体{
背景色：白色；
字体系列：verdana；
}
/*梅尼*/
.菜单包装{
宽度：100%；
高度：70像素；
背景色：rgba（45,45,45,9）；
左：0；
排名：0；
位置：固定；
z指数：99；
}
.菜单内容{
宽度：1000px；
左边距：自动；
右边距：自动；
/*背景色：红色*/
线高：70px；
颜色：#A0；
字体大小：400；
字体系列：“Roboto”，无衬线；
文本转换：大写；
}
.menu_标志{
浮动：左；
}
.菜单链接{
浮动：对；
}
a、 菜单{
颜色：#A0；
转换：.1s；
文字装饰：无；
}
a、 菜单：悬停{
颜色：#e5a000；
}
美努利斯特{
列表样式类型：无；
保证金：0；
填充：0；
}
李{
浮动：左；
显示：内联；
利润率：0.10px；
}
/*容器*/
.集装箱{
宽度：1000px；
左边距：自动；
右边距：自动；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}
.特色{
背景图片：url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
背景大小：100%100%；
宽度：100%；
高度：700px；
位置：绝对位置；
排名：0；
左：0；
z指数：1；
}

Webutveckling！





$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（'[name=“'+$.attr（this，'href'）.substr（1）+'“]'））.offset（）.top
}, 500);
返回false；
});
以下是我的建议：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

使用CSS背景属性可以做很多事情：


使用RGB十六进制设置颜色
使用url（）或单个属性背景图像设置图像
使用百分比或顶部/中心/底部属性水平和垂直居中图像。也可以使用属性“背景位置”设置它
还可以使用属性repeat/no repeat设置图像的重复。它还有自己的属性：背景重复
使用值或属性“背景大小”设置图像的大小。也可以使用此属性缩放容器中的图像，就像使用属性cover或contain一样
您可以做更多的工作，请参阅此了解更多背景信息
以下是我的建议：

.featured {
    background-image: url(http://jonathan.ohrstrom.nu/style/img/featured.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 700px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

使用CSS背景属性可以做很多事情：


使用RGB十六进制设置颜色
使用url（）或单个属性背景图像设置图像
使用百分比或顶部/中心/底部属性水平和垂直居中图像。也可以使用属性“背景位置”设置它
还可以使用属性repeat/no repeat设置图像的重复。它还有自己的属性：背景重复
使用值或属性“背景大小”设置图像的大小。也可以使用此属性缩放容器中的图像，就像使用属性cover或contain一样
您可以做更多的工作，请参阅此了解更多背景信息
成功了！谢谢你做到了！谢谢