This is the layout of the page Here's the code snippet:
<div class="newsContent row">
<div class="newsDate col-md-2">05 August 2014</div>
<div class="newsSeparator col-md-1">
</div>
<div class="newsDescription col-md-7">
<div class="row">
some dummy news
<div class="newsImage"><img alt="news2" src="/Images/News/news2.jpg">
</div>
</div>
</div>
<div class="newsActions col-md-2">
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg edit-content" title="Edit the news" <span class="glyphicon glyphicon-pencil">
</span>
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg delete-content" title="Delete the news">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</div>
</div>
</div>
Notice the green line which corresponds with this part
<div class="newsSeparator col-md-1">
</div>
The class for it is
.newsSeparator
{
background: url('my_1X1_pixel_image.png');
background-repeat: repeat-y;
}
However, the line is not repeating. Instead, only a 1px image is displayed instead of the desired green line. How can I make it so that the line repeats along the y-axis and adjusts to the parent div size?
EDIT This question is distinct from that one. In my case, I need the background image to repeat vertically.