JavaScript, понятия не имею, что я делаю

Я пытаюсь использовать JavaScript для установки ширина элементов относительно их ширины разрешения экрана. Я немного объясню, почему... У меня есть это изображение: http://i.stack.imgur.com/HeXvu.png

Я хочу, чтобы это был мой заголовок, я не хочу это будет полностью статическое изображение, я хочу, чтобы заголовок масштабировался с разрешением экрана, поэтому я настроил свои CSS и HTML примерно так...

HMTL:

CSS:

#headerMain {
    height: 79px;
    background-image: url(../img/global/middleHeader.png);
    background-repeat: repeat-x;
}
.headerLeft {
    width: 63px;
    height: 79px;
    background-image: url(../img/global/leftHeader.png);
    background-repeat: no-repeat;
    float: left;
}
.headerRight {
    width: 63px;
    height: 79px;
    background-image: url(../img/global/rightHeader.png);
    background-repeat: no-repeat;
    float: right;
}

Теперь то, что я пытаюсь сделать, это предопределить ширину и высоту для левой и правой вылеченных частей заголовка и использовать начальный элемент div заголовка (со средним изображением установить в качестве фона). Единственная проблема, с которой я здесь столкнулся, заключается в том, что фон основного блока (один со средней частью заголовка) отображается за изображением, которое является правой кривой заголовка, например: http:// i.stack.imgur.com/XEq85.png

Как мне это сделать? Одним из способов, который я мог придумать, было использование JavaScript. Вот о чем я подумал: сначала скрипт извлекает ширину экрана пользователя с помощью «screen.width», затем вычитает «63» из значения (ширина правой изогнутой части заголовка) и устанавливает это значение в качестве основного заголовка. ширина элемента, что теоретически должно решить проблему с фоном. Единственная проблема в том, что у меня практически нет опыта работы с JavaScript, и я не знаю, как что-либо делать. моих страниц... Да. Довольно плохо. Итак, что мне делать? о_о