html - 使图像覆盖宽度(居中)

Question

我想在新网站的首页上放一张图片，以覆盖整个宽度，并根据您的分辨率改变尺寸，但仍然水平居中。

这是我目前正在处理的网站:http://jonathan.ohrstrom.nu我希望整个红色部分都被这张图片覆盖:http://jonathan.ohrstrom.nu/style/img/featured.jpg

我该怎么做？这是我想要图像的 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 那么图像会覆盖整个宽度但它会自己重复..

Answer 1

尝试像这样

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