Главная / Java Script / ООП / scripts /


Масштабируемый фон web страницы

Понедельник, 14 Март 2011

 

Масштабируемый фон web страницы, на данном этапе развития html и css, не возможен без использования javascript. Обусловлено это тем, что html и css являются статичными и параметры указаные в них не изменны, в тот момент когда это было бы весьма кстати.

 

Итак к сути данной проблемы - проблема масштабируемости фонового изображения может появится у верстальщика если креативный дизайнер решил использовать в качестве фона для веб страницы, в своем Psd макете, какое-то изображение определенного размера и не дублирующегося не по вертикали не по горизонтали. Тоесть картинка с каким-то изображением.

 

Но как же быть если эта картинка имеет размеры большие или меньшие чем разрешение монитора пользователя? Тоесть при условии, что картинка должна занимать все фоновое пространство веб страницы. Выход один - масштабировать (растягивать), фоновое изображение в зависимости от окна браузера (тоесть разрешения монитора).

 

Если хотите бесплатно позвонить через интернет, вам нужно скайп скачать бесплатно на русском, и быть на связи!

 

Чтобы реализовать данное решение, следует фоновое изображение не прописывать через CSS свойством background родительского элемента body или #wrapper, а использовать обычный дескриптор изображения IMG. Которому будут динамически присваиватся свойства height и weight.

 

И так пример HTML кода и CSS стилей с их описанием.

 

Код HTML:

 

  •  
  • <html>
  • <body>
  •  
  •   <div id="fon-size"><img alt="" src="img/bg.jpg"/></div>
  •  
  •   <div id="wrapper" style="margin:0 0 60px 0;">
  •     <!-- Content -->
  •       <div class="content">
  •         <h1>Масштабируемый фон web страницы</h1>
  •         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  •         <p>...</p>
  •       </div>
  •     <!-- X Content -->
  •   </div>
  •  
  • </body>
  • </html>
  •  

 

Код CSS:

 

  •  
  • html, body {
  •   width:100%;
  •   height:100%;
  •   padding:0;
  •   margin:0;
  •   font:12px Arial, Helvetica, sans-serif;
  •   color:#333;
  •   background:#00334e;
  •   position:relative;
  •   text-align:center;
  • }
  • #wrapper{
  •   width:900px;
  •   text-align:left;
  •   z-index:1000;
  •   position:absolute;
  •   top:30px;
  •   left:50%;
  •   margin-left:-450px !important;
  •   background:#FFFFFF;
  • }
  • .content{padding:30px;}
  •  
  • /* Fon */
  • #fon-size{
  •   overflow:hidden !important;
  •   width:100%;
  •   height:100%;
  •   text-align:center;
  • }
  • #fon-size img{
  •   height:1600px;
  •   width:1579px;
  • }
  •  

 

Как видите дескриптор IMG помещен в контейнер #fon-size, который имеет следующие свойства CSS:

 

 

К самому же дескриптору IMG изначально выставлены реальные размеры изображения.

 

А теперь контейнер с содержимым веб страницы, в которой содержится текст и тп. Это контейнер с id #wrapper, для того чтобы фоновое изображение в дескрипторе IMG находилось под контейнером #wrapper (основным содержимым страницы), приходится позицианировать его абсолютно, а также выставить наивысшее положение слоя через z-index, но при этом мы сталкнемся с проблемой отцентровки этого блока на веб странице.

 

Но для этого есть специальный трюк CSS - и состоит он в том что к абсолютно позицонированному блоку, который у нас #wrapper, устанавливается положение left равное 50% и отрицательный margin, равный половыине ширины #wrapper. Еще раз приведу правила CSS для #wrapper:

 

  •  
  • #wrapper{
  •   width:900px;
  •   text-align:left;
  •   z-index:1000;
  •   position:absolute;
  •   top:30px;
  •   left:50%;
  •   margin-left:-450px !important;
  •   background:#FFFFFF;
  • }
  •  

 

При этом body должен иметь position:relative; так как #wrapper абсолютно позицонируется в body.

 

Разабравшись с HTML и CSS переходим к Javascript коду который и выполняет все манипуляции по масштабированию фонового изображения, этот яваскрипт код не использует фреймворков javascript таких как jQuery или Mootools, сделано это с целью легкого адаптирования скрипта в проект с любым используемым в нем JS фреймверком.

 

И так javascript код:

 

  •  
  • function Size(){
  •   var cont = document.getElementById('fon-size');
  •   if(cont){
  •     var wrapper = document.getElementById('wrapper');
  •     var wrapperH = parseFloat(wrapper.clientHeight);
  •     var margin = parseFloat(wrapper.style.marginBottom);
  •  
  •     var body = document.getElementsByTagName('body')[0];
  •     var bodyH = body.clientHeight;
  •     var bodyW = body.clientWidth;
  •  
  •     var img = cont.getElementsByTagName('img')[0];
  •  
  •     if(wrapperH+margin >= bodyH){
  •       body.style.height = wrapperH+margin+'px';
  •     }
  •  
  •     cont.style.height = wrapperH+margin+'px';
  •  
  •     if(img.offsetWidth<bodyW){
  •       img.style.width = bodyW+'px';
  •     }
  •  
  •     if(img.offsetHeight<wrapperH+margin){
  •       img.style.height = wrapperH+margin+'px';
  •     }
  •  
  •     if(bodyH > wrapperH+margin){
  •       cont.style.height = bodyH+'px';
  •     }
  •   }
  • }
  • window.onload=Size;
  •  
  • var ie=!!window.attachEvent;
  • window[ ie ? 'attachEvent' : 'addEventListener' ]( ie ? 'onresize' : 'resize', Size, false );
  •  

 

Описание принципа работы javascript кода. При событии браузера onload, вызывается функция Size(), которая выполняет масштабирование фонового изображения, динамически присваивая высоту и ширину. Также используется событие resize для окна браузера, на тот случай если пользователь будет стягивать или растягивать окно браузера - следует пересчитать размеры окна и динамически присвоить новую высоту и ширину масштабируемуму фоновому изображению.

 

И так при старте функции сначало проверяем существует ли обрамляющий контейнер для масштабируемого изображения, с id #fon-size, и если он есть то выполняем код функции дальше. А дальше выполняем такое: определяем размеры #wrapper и body, после чего сравниваем их в условии, и если высота #wrapper превышает или равна высоте body, то устанавливаем высоту для body равную высоте #wrapper + значение нижней внешней рамки margin-bottom от #wrapper.

 

После этого для #fon-size выставляем высоту равную высоте #wrapper:

 

  •  
  • cont.style.height = wrapperH+margin+'px';
  •  

 

Далее выполняем непосредственно масштабирование фонового изображения:

 

  •  
  • if(img.offsetWidth<bodyW){
  •   img.style.width = bodyW+'px';
  • }
  • if(img.offsetHeight<wrapperH+margin){
  •   img.style.height = wrapperH+margin+'px';
  • }
  •  

 

Затем для обрамляющего контейнера #fon-size, в который помещено масштабируемое фоновое изображение устанавливаем высоту, в том случае если высота body привышает высоту #wrapper+margin:

 

  •  
  • if(bodyH > wrapperH+margin){
  •   cont.style.height = bodyH+'px';
  • }
  •  

 

Тем кто знаком с синтаксисом и принципами javascript, будет несложно разобратся в 36 строках, и при необходимости модифицировать данный скрипт. К тому же обращаю ваше внимание на то что этот скрипт растягивает картинку на весь размер окна, поэтому возможны искажения, учтите это.

 

Посмотреть пример: Масштабируемый фон web страницы.

Скачать пример: resize-fon-webpage.zip.

 

PS. Читайте последние записи RSS Подписка на RSS

 

Метки:

Похожие статьи:

< Предыдущая   Следующая >

Комментарии 

 
anonim Вторник, 04 Октябрь 2011

А не проще ли
body{
background: #292929 url(../img/bg.jpg) top no-repeat;
background-size: 100% auto;
}

 

 
 
anonim Пятница, 07 Октябрь 2011

Проще конечно, но этот вариант не работает для браузеров IE8, IE7, IE6. Фоновая картинка не растягивается. А этот скрипт растягивает фон и в IE8 и в IE7 и IE6. Возможно есть специальные CSS свойства для масштабирования фона в IE, буду рад их здесь увидеть.
А за предложение спасибо!

 

 
 
alex Среда, 01 Февраль 2012

Доброго времени суток)
Мне понравилась ваша статься, потому что у меня проблема с IE8 в плане масштабирования страницы и я впринципе понял выход из проблемы используя js.
Но почему-то при использовании вашего скрипта браузер указывает на ошибку в строчке.

cont.style.height = wrapperH+margin +'px';

Посмотрите в чём кроется проблема)

 

 
 
cleverscript Четверг, 02 Февраль 2012

alex, какое именно сообщение об ошибке выводится? У меня в IE8 ощибки нет.
Попробуйте вевести алертом, перед этой строчкой, переменные wrapperH и margin, и посмотреть что в них.

 

 
 
cleverscript Четверг, 02 Февраль 2012

Вот еще на jQuery неплохой ресайз фона http://veselov.sumy.ua/513-polnyj-resajz-bekgraunda-ne-zavisimo-ot-razmerov-okna-brauzera.html

 

 
 
repsak Среда, 15 Февраль 2012

Вы меня конечно извините, но это маразм чистой воды - это раз.
2. масштабируемост ь работает только в случае увеличения окна, при уменьшении width/height не меняются (косяк однако)
3. руки оторвать такому дизайнеру нужно.

 

 
 
cleverscript Суббота, 18 Февраль 2012

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

 

 

Добавить комментарий