Background-position fixed in a expanded/collapse list

Question

I have a expand list which is working. My doubt is how to make my BG Img stay fixed at top left when I expand the list.

Take a look at first and second example in this list, the image goes down when it is expanded. http://jsfiddle.net/vitorboccio/79yL76wz/

<div id="listContainer">
                        <ul id="expList">
                            <li>Quem pode contratar a Loja Pronta ?
                                <ul>
                                    <li>Item A.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item B.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item C.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item D.1</li>
                                </ul>
                            </li>
                            <li>Lorem Ipsum dolor sit amet ?
                                <ul>
                                    <li>Item E.1</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

function prepareList() {
                    $("#expList").find("li:has(ul)")
                    .on('click', function(event){
                        if (this == event.target){
                            $(this).toggleClass("expanded");
                            $(this).children("ul").toggle("medium");
                        }
                        return false
                    })
                    .addClass(".collapsed")
                    .children("ul").hide();
                };

                $(document).ready(function(){

                    prepareList();
                });

thanks!

Answer 1

Just set your background position to 18px and 22px

#listContainer ul#expList li {
border-top: 1px solid #d5d5d5;
/* line-height: 140%; */
line-height: 66px;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 55px;
background-repeat: no-repeat;
min-height: 66px;
background: url(http://lorempixel.com/20/20) no-repeat 18px 22px;
}