Pull to refresh

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

Reading time 4 min
Views 20K
Задача:
Дизайнер нарисовал макет страницы, на заднем фоне которой была картинка. Я сначала было решил, что это фон который увеличивается по ширине в зависимости о разрешения монитора.
Но не тут то было. Дизайнер настаивал на то, что это масштабируемая картинка, которая сужается / растягивается при изменение окна приложения и по ширине и по высоте.
Заранее предупредив заказчика – что картинка будет грузиться 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. {
  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: 44pxtop: 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: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 (> 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.


Буду рад, если кому-то пригодится.
Tags:
Hubs:
+37
Comments 50
Comments Comments 50

Articles