Масштабируемая картинка на фоне сайта

Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 1 и в максимальном разрешении – его определили как 1600, приступил к работе.


Теория:
Для реализации данной функциональности, нам необходимо будет поиграться с абсолютным позиционированием. Так как фон масштабировать мы не можем – придется положить на нижний слой изображение которое будет пропорционально масштабироваться, а сверху нее уже положиться сетку сайта.

Схематическое представление приведено на рисунке.


Практика

HTML:

<div id="page"><br>  <div id="left"><br>    Меню<br>    <br>  </div><br>  <div id="right"><br>    Контент<br>  </div><br></div><br><br><div id="main"><br>  <div class="foot"><br>    <ul><br>      <li><a href="#" title="О компании">О компании</a></li><br>      <li><a href="#" title="Контакты">Контакты</a></li><br>    </ul><br>    <div class="contacts"><br>      <span class="copy">Copyright; © 2009</span><br>    </div><br>  </div><br><!--Растягивающаяся картинка--><br>  <div class="img"><img src="img/back_001.jpg" width="100%" alt="" title="" /></div><br></div><br><br>* This source code was highlighted with Source Code Highlighter.

CSS:

1. html {
2. height:100%;
3. }
4.  
5. body {
6. margin: 0; padding: 0;
7. height: 100%;
8. }
9.  
10. a {
11. outline:none;
12. }
13.  
14. /*Обертка картинки*/
15. #main {
16. position: relative;
17. z-index: 1;
18. height:100%;
19. }
20. /*Сам слой с картиной*/
21. #main div.img {
22. display: block;
23. position: absolute;
24. bottom:0; /*картинка всегда будет находиться внизу страницы*/
25. z-index: 10;
26. min-width: 1000px;
27. width: 100%;
28.    _width: expression((documentElement.clientWidth||document.body.clientWidth)<1004?'1004px':'100%');
29. }
30.  
31.  

1. /*Слой с копирайтами и нижнее меню*/
2. #main div.foot {
3. position: absolute;
4. bottom: 80px;
5. z-index: 20;
6. width:100%;
7. height: 30px;
8. min-width: 1000px;
9. _width: expression((documentElement.clientWidth||document.body.clientWidth)<1004?'1004px':'100%');
10. }
11.  
12. #main div.foot ul {
13. list-style:none;
14. font: normal 12px Verdana;
15. margin: 14px 0 0 75px;
16. padding: 0;
17. }
18. #main div.foot ul li {
19. display: inline;
20. margin: 0 120px 0 0;
21. }
22.  
23. #main div.foot ul li a, #main div.foot ul li a:visited {color: #faffcd;}
24. #main div.foot ul li a:hover {color:#163133;}
25.  
26. #main div.contacts {
27. position:absolute;
28. right: 44px; top: 14px;
29. width: 360px;
30. font: normal 11px Verdana;
31. color: #faffcf;
32. }
33. /*Cам сайт*/
34.  
35. #page {
36. position: absolute;
37. top: 0; left: 0;
38. z-index: 30;
39. width: 100%;
40. overflow: hidden;
41. margin: 0 0 300px 0;
42. min-width: 1000px;
43. _width: expression((documentElement.clientWidth||document.body.clientWidth)<1004?'1004px':'100%');
44. }
45.  
46. #left {
47. width:290px;
48. float: left;
49. }
50.  
51.  
52. #right {
53. margin:0 48px 0 370px;
54. position: relative;
55. color: #4c4f51;
56. font: normal 12px/18px Verdana;
57. }
58.  

Использовать либо xaк для ie6 "_", либо conditional comments — это дело вкуса.<br / >Просьба не устраивать холиваров :)

Все вроде бы хорошо, но нам установить высоту блока обертки картинки (div id=«main») равной = высоты слоя с данными div id=«page» + 400px — высота отсупа от картинки, в противном случае у нас контент сайта и картинка будут жить отдельными жизнями. Для данной цели мы задействуем JS, который мы повесим на onload
JS

1. <script language="javascript">
2. function test(){
3. var h = 400 + document.getElementById('page').offsetHeight;
4. if (h > 600) { 
5. document.getElementById('main').style.height = h + 'px';
6. }
7. }
8. </script>

Пример
Из за баннера хостинга в FF белая полоса :) в IE все путем

Bug Fix
Забыл про большие мониторы для этого вычисляем высоту окна

    function test(){<br>      var client = document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight; ;<br>      var h = 270 + document.getElementById('page').offsetHeight;<br>      if (h > client) { <br>        document.getElementById('main').style.height = h + 'px';<br>      }<br>    }<br><br>* This source code was highlighted with Source Code Highlighter.

Изменение в CSS

<br>#main {<br>  position: absolute;<br>  top:0; left:0; right:0; bottom:0;<br>  z-index: 1;<br>  height:100%;<br>}<br><br>* This source code was highlighted with Source Code Highlighter.

Буду рад, если кому-то пригодится.