使用CSS添加背景图像到div？ [英] Adding background image to div using css?

问题描述

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

HTML代码： -

 < header id =mastheadclass =site-headerrole =banner> 
< div class =header-shadow>< / div> 
< hgroup>< / hgroup> 
< nav role =navigationclass =site-navigation main-navigation> 
 
< / nav><！ -  .site-navigation .main-navigation  - > 
< / header><！ -  #masthead .site-header  - > 
  

CSS： -

  .header-shadow {
 background-image：url（'../ images / header-shade.jpg'）; 
 
 $ / code> 

其他信息：



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

div>

您需要为背景图像添加一个宽度和一个高度以便正确显示。

实例

 。 header-shadow {
 background-image：url（'../ images / header-shade.jpg'）; 
 width：xxpx; 
 height：xxpx; 
 
  

正如您所提到的，您将它用作阴影，您可以删除宽度并添加一个 background-repeat （如果需要，垂直或水平）。

实例

  .header-shadow {
 background-image：url（'../ images / header-shade.jpg'）; 
 background-repeat：repeat-y; / *垂直重复* / 
 background-repeat：repeat-x; / *为水平重复* / 
高度：xxpx; 
} 
  

希望这有助于您。

PS：xx是一个虚拟值，您需要将其替换为您的图像的实际值。

I have been trying to add background image to a div class using css. but have no success.

HTML code:-

<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');
}

Additional information:

This is an image with shadow and i am using it at the top of the website, so it mustn't have a particular width.

解决方案

You need a add a width and a height of the background image for it to display properly.

For Instance,

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

As you mentioned that you are using it as a shadow, the you can remove the width and add a background-repeat (either vertically or horizontally if required).

For Instance,

.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;
}

Hope this helps.

PS: xx is a dummy value, you need to replace it with your actual values of your image.

这篇关于使用CSS添加背景图像到div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！