how to fix the header image to screen? i try several times on adjusting the image width, although it looks fix on my screen, but it's not fix on other size of screen....anybody knows how to fix it so that the header image can fix on any size of monitor screen? thanks any step by step guildline?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <!-- <center><a href="http://sapujagat.com/" target="_blank"><img src="http://www.sapujagat.com/templates/Default/img/sapujagat-blue.jpg" border="0" alt=></a></center> --> <head> <title>{$title} {$config.suffix}</title> <meta http-equiv="Content-Type" content="text/html;charset={$config.charset}" /> <meta name="generator" content="eSyndiCat Directory Script 2.2" /> <base href="{$config.base}{$config.dir}" /> <link rel="shortcut icon" href="{$config.base}{$config.dir}{$config.admin}img/favicon.ico" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/style.css" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/rating.css" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/thumbs.css" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/resize.css" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/minmax.css" /> <link rel="stylesheet" type="text/css" href="{$templates}/css/datepicker.css" /> {if $category.id > 0 && $listings}<link rel="alternate" type="application/rss+xml" title="{$category.title|escape:"html"}" href="{$config.base}{$config.dir}feed.php?id={$category.id}" />{/if}{if $listings && $view neq 'random'}<link rel="alternate" type="application/rss+xml" title="{$category.title|escape:"html"}" href="{$config.base}{$config.dir}feed.php?list={$view}" />{/if} <meta name="description" content="{$description|escape:"html"}" /> <meta name="keywords" content="{$keywords|escape:"html"}" /> <script type="text/javascript" src="{$templates}/js/jquery.js"></script> <script type="text/javascript" src="{$templates}/js/cookie.js"></script> <script type="text/javascript" src="{$templates}/js/rating.js"></script> <script type="text/javascript"> var template_name='{$config.tmpl}'; </script> {if $manageMode} <script type="text/javascript" src="{$templates}/js/interface.js"></script> <script type="text/javascript" src="{$templates}/js/dimensions.js"></script> <style type="text/css"> {literal} div.groupWrapper { background-color:lightgreen; border:1px dotted whitesmoke; } .dropActive { padding:5px; } .dropHover { background: lightgreen; padding:0; } {/literal} </style> {/if} {esynHooker name="headSection"} <!--[if IE]> <script defer type="text/javascript" src="{$templates}/js/pngfix.js"></script> <![endif]--> </head> <body> {if $manageMode} <div style="text-align:center;color:green;background-color:silver;padding:5px;font-size:16px"> {$lang.youre_in_manage_mode} <a href="?switchToNormalMode=y">{$lang.exit}</a> </div> {/if} <!-- main page start --> <div class="main-page"> <div class="outer-page"> <div class="page"> <div class="inventory-right"> <div class="inventory-left"> <div class="inventory"> <ul> {foreach from=$menus.inventory item=menu} <li{$menu.active}><a href="{$menu.url}"{$menu.nofollow}>{$menu.title}</a></li> {/foreach} {if $config.accounts} <li class="login"> {if $account} <a href="logout.php?action=logout">{$lang.logout}</a> {else} <a href="{$config.base}{$config.dir}login.php">{$lang.login}</a> {/if} </li> {/if} </ul> </div> </div> </div> {if $config.language_switch} <!-- language switch start --> <div class="lang-switch"> <form name="language_form"> {$lang.language}: <select name="language" onchange="document.language_form.submit();"> {foreach from=$languages key=code item=language name=select_lang} <option value="{$code}" {if $code eq $config.lang} selected="selected" {/if}>{$language}</option> {/foreach} </select> </form> </div> <!-- language switch end --> {/if} <div class="header"> <!-- page resize start --> <div id="page_setup"> <ul class="page_setup"> <li id="small"> </li> <li id="normal"> </li> <li id="large"> </li> <li class="space"> </li> <li id="w800"> </li> <li id="w1024"> </li> <li id="wLiquid"> </li> </ul> </div> <script type="text/javascript" src="{$templates}/js/resize.js"></script> <!-- page resize end --> <!-- logo start --> <div class="logo"><a href="{$config.base}{$config.dir}"><img src="{$img}logo.png" alt="" title="" /></a></div> <!-- logo end --> <div class="slogan">{$lang.slogan}</div> <!-- search form start --> <div class="search-form"> <form action="{$config.base}{$config.dir}search.php" method="get" id="searchForm"> <table cellpadding="0" cellspacing="0"> <tr> <td style="padding-right: 5px;"><input type="text" class="what" name="what" size="20" id="search_input" /></td> <td style="text-align: right;"><input type="submit" name="search_top" id="searchTop" value="{$lang.search}" class="flat-button" /></td> </tr> <tr> <td colspan="2"><a href="{$config.base}{$config.dir}search.php?adv">{$lang.advanced_search}</a></td> </tr> </table> </form> </div> <!-- search form end --> </div> <div class="content"> <table cellpadding="0" cellspacing="0" width="100%" class="main"> <tr> <td valign="top" class="left-column"> <!-- menu start --> <div class="top-menu"> <ul class="menu"> {foreach from=$menus.main item=menu} {if $menu.active} <li{$menu.active}><div>{$menu.title}</div></li> {else} <li><a href="{$menu.url}"{$menu.nofollow}>{$menu.title}</a></li> {/if} {/foreach} </ul> </div> <!-- menu end --> <div id="leftBlocks" class="groupWrapper"> <!-- dynamic bocks --> {foreach from=$leftBlocks item=block} {include file="render-block.tpl" block=$block} {/foreach} <!-- end dynamic bocks --> </div> </td> <td class="shadow-left"></td> <td valign="top" class="main-right"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top"> <!-- accounts box start --> <div class="accounts"> {if $config.accounts} {if $account} <ul class="account-menu-top"> {foreach from=$menus.account item=menu} {if $menu.active} <li class="active"><div>{$menu.title}</div></li> {else} <li><a href="{$menu.url}"{$menu.no_follow}>{$menu.title}</a></li> {/if} {/foreach} <li><a href="logout.php?action=logout">{$lang.logout}</a></li> <li class="shadow"> </li> </ul> <table cellpadding="0" cellspacing="0" style="float: right; height: 46px;"> <tr> <td>{$lang.welcome}, <strong><span style="color: #FBC7A7;">{$account.username}</span></strong>!</td> </tr> </table> {else} <form action="{$config.base}{$config.dir}login.php" method="post"> <table class="no" cellpadding="2" cellspacing="0" width="100%"> <tr> <td style="width: 1%;">{$lang.username}:<br /><input type="text" tabindex="1" name="username" size="20" value="" class="what" /></td> <td style="width: 1%;">{$lang.password}:<br /><input type="password" tabindex="2" name="password" size="20" value="" class="what" /></td> <td valign="bottom"> <input type="submit" tabindex="3" name="login" value="{$lang.login}" class="login-button" /> </td> <td valign="bottom" style="text-align: right;"> <a href="{$config.base}{$config.dir}forgot.php" rel="nofollow"><span style="color: #FBF0A7;">{$lang.forgot}</span></a> <a href="{$config.base}{$config.dir}register.php" rel="nofollow"><span style="color: #FBC7A7;">{$lang.register}</span></a> </td> </tr> </table> </form> {/if} {/if} <!-- accounts box end --> </div> {if $breadcrumb} {$breadcrumb} {if $listings} <div class="xml-button"> {if $category.id} <a href="{$config.base}{$config.dir}feed.php?id={$category.id}"><img src="{$img}xml.gif" alt="XML syndication" /></a> {/if} {if $view eq 'popular'} <a href="{$config.base}{$config.dir}feed.php?list=popular"><img src="{$img}xml.gif" alt="XML syndication" /></a> {/if} {if $view eq 'new'} <a href="{$config.base}{$config.dir}feed.php?list=new"><img src="{$img}xml.gif" alt="XML syndication" /></a> {/if} {if $view eq 'top'} <a href="{$config.base}{$config.dir}feed.php?list=top"><img src="{$img}xml.gif" alt="XML syndication" /></a> {/if} </div> {/if} {/if} </td> </tr> <tr> <td valign="top"> <table cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" class="center-column"> {esynHooker name="afterBreadcrumb"} {esynHooker name="beforeMainContent"} <div id="topBlocks" class="groupWrapper"> <!-- dynamic bocks --> {foreach from=$topBlocks item=block} {include file="render-block.tpl" block=$block} {/foreach} <!-- end dynamic bocks --> </div> Code (markup):