The clickability problem was there at the beginning too, but you couldn't notice because you are using a wide screen computer.
TwentyEleven is built responsive, so any customization should be tested in various screensizes ( down to 320px which is the viewport's width of iphone portrait ). You don't need to use the real devices, just resize your browser (width-wise), all the elements should be in good shape while scaling.
To use the CSS image replacement of site title, first you have to remove that image from the html markup (along with the meta tags there that should be inside head as mentioned earlier), once that's removed from the markup, put this in the childtheme's style.css
background: url("http://esl-design-notebook.tm.agilent.com/wp-content/uploads/2013/03/4c_CorporateSig-noHL300x58.jpg") no-repeat scroll 0 0 transparent;
All the above should get the look the way you want already.