Hintergrundbild zu div mit CSS hinzufügen

Ich habe versucht, einer div-Klasse mit CSS ein Hintergrundbild hinzuzufügen, aber ich hatte keinen Erfolg.

HTML Quelltext:

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

Zusätzliche Information:

Dies ist ein Bild mit einem Schatten und ich verwende es oben auf der Website, daher darf es keine bestimmte Breite haben.

Sie müssen ein hinzufügen width und ein height des Hintergrundbildes, damit es richtig angezeigt wird.

Zum Beispiel,

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

Da Sie erwähnt haben, dass Sie es als Schatten verwenden, können Sie das entfernen width und füge a hinzu background-repeat (entweder vertikal oder horizontal, falls erforderlich).

Zum Beispiel,

.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 ist ein Dummy-Wert. Sie müssen es durch Ihre tatsächlichen Werte Ihres Bildes ersetzen.

Geben Sie eine Höhe und eine Breite an:

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

Es passiert, weil .header-shadow ist leer.

Hinzufügen height dazu:

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

Geige hier.

Fügen Sie Ihrer CSS-Datei Höhen- und Breiteneigenschaften hinzu.

So verwenden Sie ein Bild für den Körperhintergrund in CSS

body {
  background-image: url("image.jpg");
}

Sie können dies auch versuchen, um die Klasse in einem div-Abschnitt festzulegen:

/** CSS **/
.content {
    background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
}

.displaybg {
   text-align: center;
   color: #FFF;
}

<div class="content">

    <p class="displaybg">This is just a test</p>

</div>

Verwenden:

.content {
    background: url('http://www.gransebryan.com/wp-content/uploads/2016/03/bryan-ganzon-granse-who.png') center no-repeat;
 }

.displaybg {
   text-align: center;
   color: #FFF;
}