Hinzufügen von Bild zwischen zwei Reihen divs, ohne die die divs

Question

Ich kann nicht eine konsistente Art und Weise herausfinden, ein kleines Bild zwischen den Zeilen hinzufügen

Lassen Sie uns sagen, ich habe diesen HTML

<div class="row"> 
    ... 
</div> 
<div class="row"> 
    ... 
</div> 

Jetzt brauche ich um ein kleines Bild zwischen ihnen anzuzeigen, ohne die Zeilen zu beeinflussen.

Es ist eine braune Reihe und eine schwarze Reihe, und das Bild mit Sternen zwischen ihnen. Wie kann ich das konsistent machen?

Ich versuchte, einen div mit dem Bild an das Ende der Reihe div wie die

<div class="row"> 
    ... 
    <div class="div-with-image" style="position:absolute; bottom: -10px;"> 
      <img src="..."> 
    </div> 
</div> 

diese Art von Arbeiten, aber nicht in einer konsistenten Art und Weise hinzufügen. Ich habe versucht, die div.div-with-image innerhalb der Spalten Div hinzufügen, aber das ist auch nicht gut, da manchmal die Zeile mit einer festen Größe ist und das vermasselt es.

Hat jemand gute Ideen? Ich weiß wie 2 Möglichkeiten, wie es geht, aber keiner von ihnen ist konsistent und nicht sehr gut wiederverwendbar.

EDIT:

Ich denke, ich habe eine Idee.

<div class="row outer"> 
    <div class="cols"> 
     <div class="row"> 
     <div class="cols star-row">    
      ... 
     </div> 
     </div> 
    </div> 
</div> 

<style> 
    .outer{ 
     background-image: url('somethingnice.png'); 
    } 

    .star-row{ 
     background-image: url('star-row.png'); 
     background-position: 50% 101%; 
    } 
</style> 

Ich werde das versuchen und Sie wissen lassen, wie das funktioniert.

Answer 1

Dies ist nicht zwischen so viel wie über die Spitze. Im Grunde verwendet es ein Pseudo-Element (: after) und erstellt eine Überlagerung des Bildes von Sternen, die auf den verfügbaren Platz abgestimmt ist. Es hält den HTML-Code minimal und das CSS macht das ganze schwere Heben, so dass Sie leicht für verschiedene Bildschirmgrößen ändern oder zwicken können.

HTML:

<div class="row columns small-12 brown"></div> 
<div class="row columns small-12 black"></div> 

CSS:

.black { 
    background-color: black; 
    z-index:-1; /* make behind .brown:after */ 
} 
.brown { 
    background-color: brown; 
} 
.black, 
.brown { 
    height: 20px; /* half height of image */ 
} 

.brown:after { 
    content: ''; 
    width: 100%; 
    display: block; 
    height: 40px; /* brown + black */ 
    background: url('star-row.png') 50% 5px fixed no-repeat; /* adjust to match your image dimensions */ 
    z-index: 2; 
} 

JSFiddle example

---

Bearbeiten - Ein anderer Ansatz

Alternativ könnten Sie HTML codierte Sterne verwenden, dann ist die Positionierung einfacher und die Reihen können in der Höhe variieren, solange sie nicht über ein Minimum hinausgehen (die Höhe der Sterne), aber Sie müssen sich entscheiden Anzahl der Sterne. Medienabfragen können festlegen, wie viele Anzeigen für verschiedene Bildschirmgrößen angezeigt werden sollen oder welche Schriftgröße verwendet werden soll.

CSS:

.black { 
    background-color: black; 
    position: relative; 
} 
.brown { 
    background-color: brown; 
    z-index: -1; 
} 

.black, .brown{ 
    min-height:30px; 
} 

.black:before { 
    content: '\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605\00a0\00a0\2605'; 
    color: #fff; 
    text-align: center; 
    font-size: 36px; 
    width: 100%; 
    display: block; 
    height: 60px; 
    position: absolute; 
    top: -30px; 
} 

(Ihre) HTML:

<div class="row brown"> 
    <div class="large-12 columns"> 
     <p>[content]</p> 
     <p>[more content]</p> 
    </div> 
</div> 
<div class="row black"> 
    <div class="large-12 columns"> 
     <p>[content]</p> 
     <p>[etc]</p> 
    </div> 
</div> 

(wo \2605 ist ein Stern und \00a0 ist ein non-breaking Raum)

Updated JSFiddle