HI Yigit,
Thank you for getting back to me. I have tried this and I have added another css to show another image. but what happens it either shows both logo images or makes both disapear.
I added the below in the quick css area.

.header-scrolled .logo > a > img { display: none !important; }
.logo > a > img { background-image: url(http://www.pistachiodesign.com/bmsiweb/wp-content/uploads/2015/05/reason1.png) ;
background-repeat:no-repeat;}

Not sure hwo to make the logo disappeare and still allow the other image to appear when scroll.
thanks