Overriding listview item background in HTML- Windows Phone 8.1 - html

Question

I have the following template deisgned to display a listview. But the items in the list assign a background color of black by default. I am not able to override their BG color property. I have experience in native WP developement using C#. But in HTML 5 and WinJS am not able to figure out half the things about design.
HTML Code:
<div id="pivotScenario3" data-win-control="WinJS.UI.Pivot" data-win-options="{ selectedIndex: 4 }">
<div id="listViewMenu" class="listviewpivotitem" data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'SPORTS' }">
<div data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource: All.dataSource, layout: { type: WinJS.UI.ListLayout }, itemTemplate: menuItemTemplate, selectionMode: 'none' }"></div>
</div>
Template code:
<div id="menuItemTemplate" data-win-control="WinJS.Binding.Template">
<div class="menuItem">
<table>
<tr>
<td>
<img data-win-bind="src: logo" alt="Databound image" class="logo" />
</td>
<td>
<div class="selectionmodeHitTarget win-interactive"></div>
<div class="sportNameRoot">
<h2 class="sportName" data-win-bind="innerHTML: sportName"></h2>
</div>
</td>
</tr>
</table>
</div>
</div>
CSS:
.menuItem {
display: -ms-grid;
-ms-grid-columns: 20px 1fr 60px;
-ms-grid-rows: auto auto auto;
background-color: transparent;}
.menuItem .selectionmodeHitTarget {
/* So it is stacked on top of other grid elements */
position: relative;
z-index: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-row-span: 3;
width: 16px; /* reserve 4px gap between highlight and item edge */
height: 100%;
transition: background-color 250ms ease-out 250ms, visibility 0ms linear 500ms, transform cubic-bezier(0.17,0.79,0.215,1.0025) 250ms;
}
.menuItem .selectionmodeHitTarget:active {
transition: background-color ease-out 100ms; /* fade in fast */
background-color: Highlight;
}
.menuItem .selectionmodeHitTarget:after {
margin: 0 16px;
width: 16px;
height: 100%;
content: '';
}
.win-selectionmode .menuItem .selectionmodeHitTarget {
transform: translateX(-41px); /* delayed by transition */
visibility: hidden;}
.win-selectionmode .win-item {
overflow: visible;}
CSS for pivot n listview
.listviewpivotitem.win-pivot-item .win-pivot-item-content {
/* Stretch across the whole width of the screen so the whole thing is pannable.*/
padding: 0;
margin: 0;
width: 100%;}
.win-listview {
height: 100%;}
#pivotScenario3 .win-listview .win-container {
margin: 0;
padding: 5px 0 0 0;
background-color: transparent;}
#pivotScenario3 .win-listview.win-rtl .win-item {
margin: 0 0 0 20px;}
#pivotScenario3{
color:white;}
My need is that, i want to set any desired color as background color for listview items.
I know this is a lot of code to go through but my problem is too complicated. Haven't found a solution since a week. This is my last resort.
All help, suggestions and answers are appreciated!

Answer 1

Bind color code with style property
like:
<div data-win-bind="style.background:Color"></div>
it will give you the expected result.
All the Best..!!