Question

I have accordion as below.

<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 I have is

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

This gives me output as below

| image    Header 1             |
| image    Header 2             |

What I want is add SAME image on the RIGHT side too, so that output would be

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

Answer 1

Multiple backgrounds?

.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

Note: You will need to bring background-color: #5CB3FF; after background image because the shorthand background: will overwrite any previsious declarations.