Размер шапки в зависимости от разрешения экрана - Вопросы по CSS

Подскажите, пожалуйста, кто знает как сделать
У меня ширина сайта( а точнее области контента - 980px). Но ширина(и  их background) шапки , а именно header + topmenu и ширина footer  - 1200px. Но мне нужно чтобы ширина шапки и футера были резиновыми, а зона контента статическая.
 Сейчас шапка прописана так: Размер картинки 1200px
в index.php:
<div class="header-row">
   <div class="header-bg">
         <img src="<?php echo $path ?>/images/header_bg5.png" height="104" alt="bg" />
            </div>
в CSS :
.header-row{
   width:100%;
   height:104px;
   z-index:500;
   overflow:hidden;
  /* position:fixed;*/
   }
.header{
margin:0 auto;
position:relative;
width:1200px;
z-index:1000;
overflow:hidden;
   }
   
.header-bg{
margin:auto;
position:absolute !important;
width:100%;
z-index:10;
overflow:hidden;
left:0;
   }

меню сделано аналогично. как сделать шапку резиновой, чтобы она была по длине 80% экрана пользователя
шапка и меню с закругленными краями, как на сайте euroset.ru

дайте ссылку - посмотрю.
размер шапки в зависимости от ширины экрана -- это можно сделать таким способом: мое мнение
связать php и яваскрипт
у яваскрипта есть функция при помощи которой можно определить размер экрана
а потом в php поставить условия -
if ширина экрана 1024 - выводить шапку1
if ширина экрана 1280 - выводить шапку2
и тд
еще может свойства CSS поправить для каждого варианта.
Соответственно шапки - в фотошопе сделать нужные размеры.

вариант описан выше - это для сильно мега навороченой шапки - которую нельзя порезать по кусочкам и умно сверстать.
дайте по началу ссылку - я посмотрю -  и скажу точно какой вариант более оптимальный:)

сайт на локалке.
в принципе шапку можно порезать. Я ее уже разрезала на 3 кусочка. не знаю что делать дальше

стучите 355 300 282 - помогу:)

нашол код яваскрипт
function ResizeCSS(){
       if($('body').width() < 1200){
        //Прописываем значения CSS свойств, которые мы хотим применить для разрешения экрана меньше 1200 px
      $('h1').css("font-size","16px");
        }
        if($('body').width() > 1200){
        //Прописываем значения CSS свойств, которые мы хотим применить для разрешения экрана больше 1200 px
      $('h1').css("font-size","26px");
        }
    }
   ResizeCSS();
      $(window).resize(function(){
        ResizeCSS();
        });
в зависимости от размера экрана