• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.3 Creating a responsive logo/header height

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:

    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?


Well-known member
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.