使用css将背景图像添加到div？

Question

我一直在尝试使用css将背景图像添加到div类.但没有成功.

HTML代码: -

<header id="masthead" class="site-header" role="banner">
      <div class="header-shadow"></div>
      <hgroup></hgroup>
      <nav role="navigation" class="site-navigation main-navigation">

      </nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->

CSS: -

.header-shadow{
    background-image: url('../images/header-shade.jpg');
}

附加信息:

这是带阴影的图像,我在网站顶部使用它,所以它不能有特定的宽度.

Answer 1

您需要添加一个width和一个height背景图像才能正确显示.

例如,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    width:xxpx;
    height:xxpx;
}

正如您所提到的那样,您将其用作阴影,您可以删除width并添加a background-repeat(如果需要,可以垂直或水平).

例如,

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    background-repeat: repeat-y; /* for vertical repeat */
    background-repeat: repeat-x; /* for horizontal repeat */
    height:xxpx;
}

希望这可以帮助.

PS:xx是虚拟值,您需要将其替换为图像的实际值.

Answer 2

给出高度和宽度:

.header-shadow{
    background-image: url('../images/header-shade.jpg');
    height: 10px;
    width: 10px;
}