Russ

Pixel Exit Staff
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.
 

Commodore

Registered
I'd like to do this. So I create 2 images, the background image and the text image ( with a transparent background of course). Then how do I insert those images?
 

Russ

Pixel Exit Staff
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.
 

OUTL4W

Customer
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.
 

Russ

Pixel Exit Staff
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:

Code:
@media (max-width:@maxResponsiveWideWidth) {
.Responsive #logoBlock .pageContent { background-image: none; }
}
Code:
@media (max-width:@maxResponsiveWideWidth) {
.Responsive #logoBlock .pageContent { background: url(@imagePath/xenforo/mobilebg) no-repeat center center #000; }
}
 

Russ

Pixel Exit Staff
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.