html – 为什么背景图像没有特定的宽度和高度显示？

我一直想知道为什么背景图像不会显示,除非我特定图像的宽度和高度(以像素为单位).我试图仅以百分比为单位指定宽度,但它不起作用. w3cschools.com能够显示背景图像而不指定宽度和高度,但它仅适用于身体背景.任何解释或解决方案解决方法？

HTML

<div class="pic"></div>

CSS

.pic {
  BACkground: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 244px;
  height: 230px;
  BACkground-size: contain;
}