Question

我正在尝试为div类提供标题的背景图像，但它不会显示出来。

请参阅：

[CSS]

  .header
  {
      background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
  }

[HTML]

<div class="header">
</div>

我做错了什么？提前谢谢。

Answer 1

background-image不是简写属性，因此您不能使用多个值：

.header
  {
      background-image: url('path.png');/* remove no-repeat from here*/
      background-repeat: no-repeat; /*use no-repeat here*/
      width: 100%;
  }

或者，像这样使用它：

.header
  {
      /*short-hand method  can have multiple values*/
      background: url('path.png') no-repeat; 
      width: 100%;
  }

Answer 2

具有背景的元素需要具有尺寸。他们不会自动调整背景图像的大小。

.header
  {
      background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
      height: ?????
  }

Answer 3

试试这个：

  .header
  {
      background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat; 
      width:100%; 
      height:431px;

}

http://jsfiddle.net/csdtesting/eqzro6s3/1/

Answer 4

Js Fiddle

 .header{
      background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat;
      width: 100%;
      height:432px;
      }

将背景图片更改为背景：

Css背景图像根本没有出现

4 个答案: