CSS: Adding an image to a sidebar

[Amapola]

I am trying to attach an image to a sidebar I have put on my website. To facilitate it's use I have a border in place to allow it to extend. I would have put up a JSfiddle of the code but the website is running through engine so it doesn't work properly. Below is a link to the site (the bar is on the left), a copy of the code and also a picture illustrating what I hope to achieve. Website: http://www.oceanian.com.au/darkthemetest1Code:\[code\]<div class="chat-top"> <div class="chat-users" style="height: 225px;"> <div class="chat-bottom"> <div class="toolbar"> </div> <form name="chatform" method="post" action="" id="chatform" onsubmit="chat[$(this).parent().parent().attr("data-preset")].postMessage($(this).find(".chat-input").val()); return false;"> </div> <input type="hidden" name="csrf_token" value=""></form> </div> </div> </div> </div> </div> <div class="container_spacer"> <div class="left"><!-- --></div> <div class="right"><!-- --></div> </div><div class="clearing"><!-- --></div><div class="special_container with-header with-footer"><div class="m_html"> <style> .m_chat { width: 420px; background: #242526; bottom: 100px; position: fixed; left: -420px; z-index: 5000000000000; border-right: 30px solid #225255; transition:left 1s; -moz-transition:left 1s; /* Firefox 4 */ -webkit-transition:left 1s; /* Safari and Chrome */ -o-transition:left 1s; /* Opera */ } .m_chat:hover { left:-0px; } .m_chat .chat-bottom { border-top: 0px; border-top-color: transparent; background: #2d2d2d; cursor: pointer; } .m_chat .chat-users { overflow: hidden; float: right; width: 100px; white-space: nowrap; padding: 6px 8px; text-overflow: ellipsis; } .toggler { background: #09aeed; height: 10px; width: 420px; } </style></div></div>`\[/code\]Illustration: http://i.imgur.com/RtBLwsl.jpg (you can see the bar on the right has been replace with an image I have mocked up)Any help would be very much appreciated!Thanks in advance,Kuro.