Im trying to get this photo in its place.


Just like this:
One thing I might suggest is separate those images. Have your logo text as a single image, then the background as it's own. You'll be able to work it easier in responsive mode.
Easiest way.... set the normal header logo image to your texted based image. Then set the background here:

Style Properties -> [XB] Header and Navigation -> Logoblock Pagecontent CSS

Set the background image there.
I've had this setup like this for some time but the mobile image doesn't respect the responsive dimensions. Want it to look exactly as the desktop view...but it only shows the center image within the banner. Just can't seem to figure it out, so I'll defer to the experts.
Technically when you're using such a large background image in mobile it won't fit without stretching the crap out of it or cutting some of it off. The nice part about doing it like this (how I've suggested) is you can add a media query to either remove the background image or set a new one:

@media (max-width:@maxResponsiveWideWidth) {
.Responsive #logoBlock .pageContent { background-image: none; }

@media (max-width:@maxResponsiveWideWidth) {
.Responsive #logoBlock .pageContent { background: url(@imagePath/xenforo/mobilebg) no-repeat center center #000; }
Can you apply the background to the logoblock pagecontent css in the [xb] header and navigation area so I can see what's going on. You don't need to apply the new text based logo on header and navigation yet.

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.