Adding image between two row divs without affecting the the divs - html

Question

I can't figure out a consistent way to add a small image between rows
Let's say I have this html
<div class="row">
...
</div>
<div class="row">
...
</div>
Now I need to display a small image between them but without affecting the rows.
There is a brown row and a black row, and the image with stars between them. How can I do this in a consistent way?
I tried adding a div with the image to the end of the row div like that
<div class="row">
...
<div class="div-with-image" style="position:absolute; bottom: -10px;">
<img src="...">
</div>
</div>
This kind of works but not in a consistent way. I tried adding the div.div-with-image inside the columns div, but that's not good either as sometimes the row is with a fixed size and that messes it up.
Does anyone have any good ideas? I know like 2 ways how to do it, but none of them are consistent and not very well reusable.
EDIT:
I think I have an idea.
<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>
I'll try this and let you know how this works.

Answer 1

This is not between so much as over the top of. Basically it uses a pseudo element (:after) and creates an overlay of the image of stars that is matched to the space available. It keeps the HTML minimal and the CSS does all the heavy lifting so you can easily change or tweak for different screen sizes.
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
Edit - Another approach
Alternatively you could use HTML coded stars then the positioning is easier and the rows can vary in height as long as they don't go past a minimum (the height of the stars), but you have to decide on your number of stars. Media Queries can sort out how many to show for various screen sizes, or what font size to use.
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;
}
(Your) 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>
(where \2605 is a star and \00a0 is a non-breaking space)
Updated JSFiddle