Несколько фонов css не работают

Question

Я пытаюсь использовать 3 фонов на div, как это.

.leftcontent 
{ 
    padding: 0 20px; 
    padding-bottom: 35px; 
    width: 615px; 
    margin-right: 30px; 
    background: 
     url('../images/primary_content_bottom_item31.gif') bottom left no-repeat, 
     url('../images/primary_content_bg.gif') repeat-y, 
     url('../images/primary_content_bg2.gif') top left no-repeat; 
} 
.left 
{ 
    float: left; 
} 

Проблема в том, что primary_content_bg2.gif фоновое изображение не отображается.

Однако он отображается, когда я удаляю первые 2 фонов (primary_content_bottom_item31.gif и primary_content_bg.gif).

Вот мой HTML: отображается над последней

<div class='left leftcontent'> 
    <h1>Lottery</h1> 
    <p>The Brookvale Lottery was set up in 1976 to help raise money for the building of our Village Hall. Today, the lottery raises funds for the day to day running and upkeep of the Hall. In 2012, as well as paying out to Brookvale residents, it also paid for the purchase and installation of security fencing at the Hall.</p> 
    <p>The Lottery is open to all residents of Brookvale over 16.</p> 
    <h2 class=center><strong>1st Prize - &pound;50</strong></h2> 
    <h2 class=center><strong>2nd Prize - &pound;30</strong></h2> 
    <h2 class=center><strong>3rd Prize - &pound;20</strong></h2> 
    <p>To find out how the lottery works, see Rules of Play.</p> 
</div> 

Answer 1

Ваш второй определенный фон. Это должно работать:

background: 
    url('../images/primary_content_bottom_item31.gif') bottom left no-repeat, 
    url('../images/primary_content_bg2.gif') top left no-repeat, 
    url('../images/primary_content_bg.gif') repeat-y; 

Порядок определения изображений - это порядок их отображения. Более ранние значения отображаются выше определенного позже.