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

问题描述

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

I have been trying to add background image to a div class using CSS, but I didn't have any success.

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

其他信息:

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

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

推荐答案

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

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

例如，

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

如前所述，您将其用作阴影，可以删除width并添加background-repeat(如果需要，可以垂直或水平放置).

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

例如，

.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是一个伪值.您需要将其替换为图像的实际值.

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