CSS simple make my background 100% (autofit browser)? - html

Question

I have some problem with my CSS :
My coding so far :
#leftcolumn {
background: url('SlicingImage/action_bar.jpg');
background-repeat:none;
float:left;
z-index: -1;
}
HTML:
<div id="containerleft">
<div id="leftcolumn" >
<p><img src="SlicingImage/alacards_logo.png"/></p>
<ul>
<li class="separator"></li>
<li class="buttons">home</li>
<li class="separator"></li>
<li class= "buttons">users</li>
<li class="separator"></li>
<li class= "buttons">tutorial</li>
<li class="separator"></li>
<li class= "buttons">issuers</li>
<li class="separator"></li>
<li class= "buttons">merchants</li>
<li class="separator"></li>
<li class= "buttons">partners</li>
<li class="separator"></li>
<li class= "buttons">high light</li>
<li class="separator"></li>
<li class= "buttons">news</li>
<li class="separator"></li>
<li class= "buttons">contact us</li>
<li class="separator"></li>
<li class="bottom"></li>
</ul>
</div>
</div>
If I run this code, result : BG but I want that small gray area covered like this
If I delete
background: url('SlicingImage/action_bar.jpg');
become like BG2
I tried add that class="bottom", but not like what I want (must define height manually)

Answer 1

Your background it is not showing because the z-index. Try to put a higher one

Answer 2

Try giving width to your ul and margin:auto;
ul {
list-style-type: none;
margin: auto;
overflow: hidden;
padding: 0;
position: relative;
width: 750px;
}

Answer 3

Works for me:
#leftcolumn {
background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTFMUprTNP6nK2r2QxbZ-ls7YlgiVenNuwCBkXwX-keeE96iOradptCHPLZ);
background-repeat:none;
float:left;
z-index: -1;
}
It must be something odd in your button and/or separator classes.
NOTE: I used some random pink background image that I found with Google image search.

Answer 4

I found the solution: After I put </p> after </ul>, will give me the result I want
<div id="containerleft">
<div id="leftcolumn" >
<p><img src="SlicingImage/alacards_logo.png"/>
<ul>
<li class="separator"></li>
<li class="buttons">home</li>
<li class="separator"></li>
<li class= "buttons">users</li>
<li class="separator"></li>
<li class= "buttons">tutorial</li>
<li class="separator"></li>
<li class= "buttons">issuers</li>
<li class="separator"></li>
<li class= "buttons">merchants</li>
<li class="separator"></li>
<li class= "buttons">partners</li>
<li class="separator"></li>
<li class= "buttons">high light</li>
<li class="separator"></li>
<li class= "buttons">news</li>
<li class="separator"></li>
<li class= "buttons">contact us</li>
<li class="separator"></li>
<li class="bottom"></li>
</ul>
</p>
</div>
</div>