Hintergrund Bild und füllt nur die Hälfte des div

Ich habe ein div mit fester Größe, die ich brauchen Sie, um ein Hintergrundbild zu. Jedoch möchte ich das Bild füllt die gesamte Breite des div-aber werden beschnitten, um bis bis sagen, ein Drittel bis zu einer Hälfte der Höhe des div. Ich habe es geschafft diese mit einem pseudo-element, zum Beispiel so:

<div class="card-wrap bg-img-3"><div class="card">
  <div class="top">
        <h2 class="white">Heading</h2>
   </div>    
</div></div>  



.bg-img-3:before {
            content: '';
            position: absolute;
            width: 9.4cm;
            height: 3cm;
            z-index: -1;
            background: url("./img/video.png");
        }

Aber mit dieser Technik, die ich offenbar nicht in der Lage, fügen Sie eine hintergrund-Farbe, um die untere Hälfte der div.

Wie kann ich einen beschnitten hintergrund-Bild und hintergrund-Farbe auf dem gleichen div?

InformationsquelleAutor Ben | 2016-02-16
Schreibe einen Kommentar