XF 1.3 Creating a responsive logo/header height

[Scribbler]

I have a background image in place on my forum that covers the header and body background areas (similar to what is achieved with the Header and Background Evolved addon) and scales based on the browser window size. My logo is a part of that background image. To create enough space to show the logo at the top of the forum, I created a completely transparent image in photoshop and added it as the board logo. The only problem is that this creates too much space on smaller screens and mobile devices. For the life of me, I can't figure out how to scale the logo based on the browser dimension. I would like to be able to scale the height of the logo.

Here is what I used for the background in extra.css, but I haven't been able to make it work for the header:

#headerMover
{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    background-size: 100%;
    background-position: top-center;
    background-repeat: no-repeat;
    background-image: url(background.jpg) !important;

}
#headerMover #headerProxy, #header, #content
{
    background-color: transparent !important;
}

The Respollo plugin didn't do quite what I needed either. Does anyone have any ideas?

 

[Jake Bunce]

If you post your forum URL I can debug the CSS and provide exact instructions.

 

[Scribbler]

If you post your forum URL I can debug the CSS and provide exact instructions.

The url is http://homeschooljunction.com

Thanks!

 

[Jake Bunce]

Hmm. To make this responsive you really need to restructure the layout. I suggest a tile background (wood grain) with a "regular" title image on top which can then be made responsive.

Or consider something like this:

http://xenforo.com/community/threads/wallpaper-size.22055/

By constraining the body size you can precisely fit your background. But this then becomes a fixed-width style, not responsive.

 

[AndyB]

Another option (this is what I do) is to completely remove the header in responsive mode. That way you can keep your awesome looking header the way it is.

 

[Scribbler]

@AndyB - That sounds like my best option. How would I go about doing that?

Thanks!