CSSルールが一致しませんか？何故なの？

Question

OK、これは簡単なものでなければなりません。うまくいけば、私はちょうどここで明白な何かを見逃しています。最初のルールが一致している、いくつかの理由

#cPlayControlRack{ 
    height:28px; 
} 
#cPlayControlRack li{ 
    width:29px !important; 
    height:28px !important; 
    background-image:url(background:url(i/playersprite.png); 
    background-repeat:no-repeat; 
    display:block; 
} 
.cplaybutton{background-position:0 0;} 
.CpauseButton{background-position:30px 0;} 
.CplaySkipBack{background-position:60px 0;} 
.CplaySkipForward{background-position:90px 0;} 
.CplayVolumeIcon{background-position:120px 0;} 
.CplayVolumeSlide{background-position:150px 0;} 

：

<ul id="cPlayControlRack"> 
    <li class="cplaybutton"></li> 
    <li class="CpauseButton CplayHidden"></li> 
    <li class="CplaySkipBack"></li> 
    <li class="CplaySkipForward"></li> 
    <li class="CplayVolumeIcon"></li> 
    <li class="CplayVolumeSlide"></li> 
</ul> 

そして、次のCSS：私は、次のHTMLマークアップを持っています。 #cPlayControlRackは、ULを28ピクセル高くしています。しかし、他のルールのどれもが一致していないので、スプライトは表示されず、lisには高さや幅が与えられていません。

JSFiddle：http://jsfiddle.net/4r2jm/

編集：私のマークアップを動的に生成される、ではないことは私の知る限り違いを作る必要があること。

background-image:url(background:url(i/playersprite.png); 

次のようになります：7行目の構文エラーがあります

Answer 1

background-image:url('i/playersprite.png');