Масштабируемый фон 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, буду рад их здесь увидеть.
А за предложение спасибо!

 

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

 

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