resizing the Header using CSS

Could u Please let me know how can i resize the header(the header image  has to fit the as per the Screen size)

Please check the below script which i am using.

<style>
 body {
  margin-left: 0px;
  margin-right: 12px; }
</style>
<table cellspacing="0" cellpadding="0" width="100%"><tr>
 <td valign="top">
             <!-- Header Start -->
<style>
#buehne1 {line-height: 19px;background-image:url(images/buehne_1_intra.gif)}
#buehne3 {height:58px;background-image:url(images/buehne_3_intra.jpg); text-align:none; padding-left:184px;}
#buehne3 span {position:absolute;line-height:1em;width:100%;;margin:40px 0 0 12px}
#buehne3 img {float:right;margin-left:80px}
#buehne4 {height:11px;background-color:white; text-align:left; background-image:url('images/buehne_4_intra.gif'); background-position:top right;}
#buehne5 {background-image:url(images/buehne_5_intra.gif);background-position:left;width:100%;;background-color:#003399;}
#buehne5 .horizontal_navi a {height:24px;line-height:24px;width:100%;;background-image:url(images/div_intra.gif) ;background-repeat:no-repeat; padding: 5px 0 5px 29px}
#buehne5 .horizontal_navi a.first {background-image:none;padding-right:0px;}
* html #buehne5  .horizontal_navi a {padding: 0 0 0 30px}
</style>
<div id="buehne1" class="blue_11">
&nbsp;&nbsp;&nbsp;&nbsp;</div>
<div id="buehne3" style="color:#003399;font-size:11px;font-family: verdana"><span >GTO IES Partners in Performance</span><img src="images/buehne_2_flex_en_intra.gif" border="0" alt="" ></div>

<div id="buehne4"><img src="images/buehne4_gto.jpg" height="11" border="0" alt=""></div>
<div id="buehne5">
<table cellpadding=0 cellspacing=0 style="height:24px;">
<tr>
<td style="width:763px; padding-left:12px" class="horizontal_navi">
</td>
<td style="width:198px; height:18px"></td>
</tr>
</table>
</div>
<map name="logo"><area shape="rect" coords="495,1,706,40" ></map>
<!-- Header End -->
              </td>
</tr>
</table>

Regards
Naren
knaren_1975Asked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
0
 
knaren_1975Author Commented:

Quick help on this will be greatly appreciated

Regards
Naren
0
 
VirusMinusCommented:
paste the entire page or a link. also could you explain clearly what needs to happen to the header image? Does it need to expand horizontally? ie. the width stretches to fit the screen?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Maverick_CoolCommented:
Forget css for image,
set size or width and height(100%) of table containing the header images using CSS. Image will will get auto adjusted.
0
 
Michel PlungjanIT ExpertCommented:
You can try javascript:

<img src="blank.gif" border="0" alt=""
onLoad="if (this.src.indexOf('blank')!=-1) {
  if (screen.width<800) this.src='images/buehne_2_flex_en_intra_small.gif';
  else   if (screen.width<1024) this.src='images/buehne_2_flex_en_intra_medium.gif';
  else   this.src='images/buehne_2_flex_en_intra_large.gif';
}
">
0
 
Eternal_StudentCommented:
Never really used liquid images before but this may be of interest to you:

http://michelf.com/weblog/2005/liquid-image/
0
 
knaren_1975Author Commented:
Thx
0
 
Michel PlungjanIT ExpertCommented:
So help within 6 hours was not fast enough to warrant your appreciation - or was the answer not complete?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.