아코디언 양면에 이미지를 표시

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

여러 배경이 있습니까?

Demo

.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; 
} 

참고 :속기 background: 어떤 previsious 선언을 덮어 쓰기 때문에 당신은 배경 이미지 후 background-color: #5CB3FF;을 가지고해야합니다.