Вчера зашел в свой любимый поисковик, смотрю фон большуший на весь экран, еще такой интересный, какая та архитектура, потом что то нужно было на рабочем столе, свернул окно браузера смотрю фон растягивается, опа думаю интересно это в стилях фон прописан или с помощью img, открыл firebug начал ковыряться и сразу нашел img тег с тем самым фоном и прописанными стилями к нему.
И так как это реализовать?
Мы возьмем изображение из того же гугла для примера, разрешение 1400Х900, этого достаточно чтобы при растягивании особо не терялось качество.
Выводим изображение на страницу
1 | <img class="rezinaimg" src="p7.jpg" width="100%" height="100%" /> |
ширина и высота по высоте экрана, не знаю почему в коде гугла был такой код:
1 | <img id="fpdi" src="p7.jpg" width="1848" height="1188"/> |
видимо там идет подстановка высоты и ширины с помощью java script’а, еще и id есть, точно на яве.
Теперь перейдем к стилям, точнее к позиционированию изображения.
1 | ,rezinaimg{position:absolute; top:0px; left:0px; z-index:-1;} |
Здесь мы установили абсолютную позицию в самый верхний левый угол экрана, откуда и будет тянуться изображение,
и установили z-index минус 1 чтобы наше изображение лежало под всем остальным.
Все просто)) тут пример
А это пример на java script’е , смотрим
Пришлось использовать jquery так как в ie не устанавливаются события onresize & onload для боди, ну эт я просто другого варианта не нашел, кто знает как лучше сделать напишите.
Интересный блог, для тех кто верстает.
Загрузка ...
Наконец-то ты поставил ретвитиы и кнопку “комментировать” =) Твитнул. Откоментил
теперь у меня полный боекомплект))
А разве этот метод кроссбраузерный? У меня в 6 EI вообще каша вышла =(
для ие нужно значение ширины и высоты на яве подставлять( так он не тянет
сделал вариант на яваскрипте)) пример в статье
Во! Классно =) Спасибо. Уже даже знаю где применю.
только смотри одна не хорошая вещь есть в фоне с использованием img))
Что -то со скриптом ничего неработает
а у меня работает, везде. может сервер гугла где библиотека jquery лежит не доступен был.
картинка увеличивается, супер! но остаётся просто изображением… а как сделать её именно фиксированным фоном???
html, body {
width: 100%;
height: 100%;
text-align: left;
}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
<div id="scroller"
Content
присоединяюсь к вопросу Ольги
растяжение то работает, а как теперь этот фон зафиксировать?
style type=”text/css”
html, body {
width: 100%;
height: 100%;
text-align: left;
}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
/style
body
div
img id=”background” src=”img/vn.jpg” alt=”"
/div
div id=”scroller”
Content
/div
/body
поменяйте rezinaimg{position:absolute; top:0px; left:0px; z-index:-1;}
на
rezinaimg{position:fixed; top:0px; left:0px; z-index:-1;}
Приветствую, а в netscape не видно фона. Версия браузера 9.0.6