resizing the Header using CSS

Posted on 2007-11-27
Last Modified: 2013-12-08
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.

 body {
  margin-left: 0px;
  margin-right: 12px; }
<table cellspacing="0" cellpadding="0" width="100%"><tr>
 <td valign="top">
             <!-- Header Start -->
#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}
<div id="buehne1" class="blue_11">
<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;">
<td style="width:763px; padding-left:12px" class="horizontal_navi">
<td style="width:198px; height:18px"></td>
<map name="logo"><area shape="rect" coords="495,1,706,40" ></map>
<!-- Header End -->

Question by:knaren_1975
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Author Comment

ID: 20357988

Quick help on this will be greatly appreciated

LVL 30

Expert Comment

ID: 20357997
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?

Expert Comment

ID: 20358074
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.
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

LVL 75

Expert Comment

by:Michel Plungjan
ID: 20358158
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';
LVL 18

Expert Comment

ID: 20358652
Never really used liquid images before but this may be of interest to you:
LVL 75

Accepted Solution

Michel Plungjan earned 500 total points
ID: 20363956

Author Comment

ID: 20712468
LVL 75

Expert Comment

by:Michel Plungjan
ID: 20712570
So help within 6 hours was not fast enough to warrant your appreciation - or was the answer not complete?

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question