не работает background

[T@NKIST]

есть код

<section><img src="/cover/17.jpg" alt=""/>
		    <ul>
			    <li>Artcore</li>
			    <li>Nastyfuckk</li>
			    <li>Machinedrum</li>
		    </ul>
</section>

Стиль

article section {
    height: 186px;
    width: 186px;
    float: left;
    margin: 8px 0px 8px 16px;
}
article section img {
    height: 186px;
    width: 186px;
    margin: 0;
    padding: 0;
}
article section ul {
    height: 66px;
    background: black !important;
    z-index: 999;
    padding: 0;
    margin: -71px 0 0 0;
    width: 186px;


}
article section ul li {
    color: white;
    font-size: 11px;
    font-family: tahoma, arial, verdana, sans-serif, 'Lucida Sans';
    text-shadow: rgb(38, 38, 38) 0px 1px 0px;
    height: 22px;
    opacity: 1 !important;
    text-overflow: ellipsis;
}

когда работает это код (список находит на картинку) тогда background: black !important; для ul не работает, вместо этого фон прозрачный.

Когда убираю <img src="/cover/17.jpg" alt=""/> фон стает черным.

Как сделать фон черным когда ul на картинке?

[Splin]

Давайте уважать друг-друга. Выложите код сюда http://jsfiddle.net