Logo "Overlapping" Header

Hey folks,

I’d like to have my site’s logo “overlapping” the header image and menu bar. Basically, I’d like it to be the “top” object on the page.

At the moment I have this CSS;

.site-title a {
	background: url('https://soniccollectors.com/wp-content/uploads/2013/09/Logo_500.png') -80px 0 no-repeat;
	width: 500px;
	height: 107px;
	text-indent: -9999px;
}

While this puts the logo over the header image, when I try to move it to where I want, part of the image is cut off, as you can see on the left of it. I’m assuming this is because the area that the image is in doesn’t extend as far as I want to position the logo. I tried extending the size of the area, but it extends right, not left, seemingly not wanting to go past that point. I also tried using padding and overflow, but with no luck.

I’d like the final product to look like THIS. If anyone has any suggestions I’d greatly appreciate it.

Cheers.