How to display different logos on selected forums?

[Leefish]

new header template:

<div id="container">
        <a name="top" id="top"></a>
        <div id="header">
            <a href="{$mybb->settings['bburl']}/index.php"><div class="biglogo">MY SITE</div></a>
            <div class="menu">
                <ul>
                    <li><a href="{$mybb->settings['bburl']}/search.php"><img src="{$theme['imgdir']}/toplinks/search.gif" alt="" title="" />{$lang->toplinks_search}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/memberlist.php"><img src="{$theme['imgdir']}/toplinks/memberlist.gif" alt="" title="" />{$lang->toplinks_memberlist}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/calendar.php"><img src="{$theme['imgdir']}/toplinks/calendar.gif" alt="" title="" />{$lang->toplinks_calendar}</a></li>
                    <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><img src="{$theme['imgdir']}/toplinks/help.gif" alt="" title="" />{$lang->toplinks_help}</a></li>
                </ul>
            </div>
            <hr class="hidden" />
            <div id="panel">
                {$welcomeblock}
            </div>
        </div>
        <hr class="hidden" />
        <br class="clear" />
        <div id="content">
            {$pm_notice}
            {$bannedwarning}
            {$bbclosedwarning}
            {$unreadreports}
            {$pending_joinrequests}
            <navigation>
            <br />

In your global css

body.index .biglogo {
background:url(images/logo.png)no-repeat;
text-indent:-9999px;
width:320px;
height:80px;
margin:auto;
max-width:100%;
display:block;
}

body.forum_4 .biglogo {
background:url(images/logo4.png)no-repeat;
text-indent:-9999px;
width:320px;
height:80px;
margin:auto;
max-width:100%;
display:block;
}

and so on. You need to set the height and width to match the image size and width.

EDIT: I made an error in the css - my apologies.