css背景 - 不适合div

Question

我有一个固定宽度和高度的div如下：

<div class="fontTest">A</div>

我制作了一个尺寸为800px * 169px的jpeg背景图片，以适应这个div。下面是我正在使用的CSS：

.fontTest {
    font-family:'Noto Serif', serif; color:#744801; 
    margin-left:auto; 
    width:800px; 
    height:169px; 
    margin-right:auto; 
    background: #FDEEEE url('img/bkg1.jpg') 0 0 no-repeat fixed; 
}

我使用简写背景css属性来定义1行中的所有背景属性。由于图像的宽度和高度与div的宽度和高度相匹配，因此图像应完全覆盖div-但这种情况不会发生。背景图像仅部分覆盖div（）。请帮忙。

Answer 1

在速记属性声明中删除背景附件声明fixed。

Jsfiddle Demo

重新调整小提琴视图的大小以查看差异。

  

此关键字表示背景是针对视口修复的。即使元素具有滚动机制，“固定”背景也不随元素移动。

.fontTest {
    font-family:'Noto Serif', serif;
    color:#744801;
    margin-left:auto;
    width:800px;
    height:169px;
    margin-right:auto;
    background: #FDEEEE url('http://lorempixel.com/output/city-q-c-800-169-4.jpg') 0 0 no-repeat;
}

Answer 2

使用

background-size: cover;

并且图像将覆盖整个div。