Override background of list item in HTML-Windows Phone 8.1

I have the following template rendered to display a list. But the items in the list are assigned a background color of black by default. I cannot override their BG color property. I have experience developing my own WP using C #. But in HTML 5 and WinJS, I can't figure out the design details.

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 the background color for the list items.

I know this is a lot of code, but my problem is too complex. Have not found a solution for a week. This is my last resort.

All help, suggestions and answers are appreciated!