在手风琴两侧展示图像

Question

我手风琴如下。

<div class="question">Header 1</div> 
<div class="answer"> 
    text 1    
</div> 
<div class="question">Header 2</div> 
<div class="answer"> 
    text 2 

</div> 

CSS我是

#wrapper { 
    width: 100%; 
    font-family:verdana; 
    font-size:12px; 
} 

.question { 
    width: 100%; 
    float: left; 
    border: solid blue; 
    border-width: thin; 
    background-color: #5CB3FF; 
    font-size: 18px; 
    font-weight: bold; 
    padding-top:20px; 
    cursor: pointer; 
    background-image: url(images/down_arrow.jpg); 
    background-size: 5% 100%; 
    background-repeat : no-repeat; 
} 
.question:hover { 
    border: solid blue; 
    border-width: thin; 
    background-color: #736AFF; 
} 

.answer { 
    width: 100%; 
    float: left; 
    padding-top:10px; 
    padding-bottom:10px; 
} 

.active { 
    background-image: url(images/up_arrow.jpg); 
    background-size: 5% 100%; 
    background-repeat:no-repeat; 
} 

这给我的输出如下

| image Header 1    | 
| image Header 2    | 

我要的是在右侧添加相同的图像也使输出将

| image Header 1   image | 
| image Header 2   image | 

Answer 1

多背景？

.question { 
    background:url(images/up_arrow.jpg) top left; /* fallback */ 
    background:url(images/up_arrow.jpg) top left, url(images/up_arrow.jpg) top right; 
    background-size: 5% 100%; 
    background-repeat:no-repeat; 
    background-color: #5CB3FF; 
} 

Demo

注：您将需要经过背景图片带来background-color: #5CB3FF;因为速记background:将覆盖任何previsious声明。