Вопрос № 103858: Подскажите, пожалуйста, как сделать так, чтобы картинка на бэкграунде была зафиксирована и не размножена "черепецей" и в тоже время была "резиновой" для любого разрешения (разрешения больше самой картинки)....
Вопрос № 103.858
Подскажите, пожалуйста, как сделать так, чтобы картинка на бэкграунде была зафиксирована и не размножена "черепецей" и в тоже время была "резиновой" для любого разрешения (разрешения больше самой картинки).
Начнём с того, что с простым бэкграундом этого не сделать.
На понадобиться картинка и таблица стилей.
Документ примет вид подобный приведённому в примере.
Что есть что:
Тэг <style>
задаёт таблицу стилей, хотя предпочтительнее вынести её в отдельный файл, добавив в тэг дополнительный атрибут src и убрав внутреннее содержимое.
body { margin: 0 0 0 0; }
задаёт отступ тела документа, чтобы фон плотно прилегал к краям выделенной под него области.
#bg { position: fixed; height: 100%; width: 100%; z-index: 0; }
определяет стиль нашего фонового рисунка. position может быть fixed или absolute смотря относительно чего вам надо растягивать картинку, относительно окна или относительно документа соответственно.
#fg { position: absolute; z-index: 1; }
эта самая интересная часть, этот кусок задаёт стиль всему остальному документу, так называемому foreground'у не относящемуся к background'у. z-index задаёт что будет к нам бзиже, поэтому у бэкграунда он метьше, а position: absolute, чтобы элементы позиционировались относительно тела документа.
<div id="fg"></div>
внутри этого тэга у нас расположиться то, что до этого было в тэге <body>
<img id="bg" src="bg.png">
должна обязательно идти после div'а, так как “самый умный” браузер ИЕ, если пропишите стиль «position: fixed;», выдаст совсем не желаемый результат.
Если возникнут вопросы по поводу написанного, пишите.
Приложение:
--------- Si vox est - canta!
Ответ отправил: Errandir (статус: 5-ый класс)
Ответ отправлен: 01.10.2007, 02:34
Отвечает: Бородин Александр Олегович
Здравствуйте, Иванов Юрий Валерьевич!
Ответ на это простой - никак этого не сделать. Вернее, зафиксировать-то можно, для этого есть свойства background-position и background-repeat, а вот растянуть бэкграунд на данный момент никак нельзя. Я говорю "на данный момент" потому, что все-таки не все так мрачно - скоро(через пару-тройку, ну никак не больше десяти лет) увидит свет новый стандарт - CSS3(нынче мы пользуемся CSS2), в котором есть свойства, которые Вам нужны. И все, что Вам нужно, можно будет сделать, не напрягаясь.
На данный момент Ваша задача осуществима - но это уже довольно большое приложение, подозреваю, что в данном случае не обойтись без PHP. Принцип примерно такой - JS-скрипт замеряет параметры окна браузера, отсылает их на сервер, который берет изображение из картинки бэкграунда, преобразует его в соответствии с полученными данными, и выдает картинку.
Это на словах все просто, а если попробовать такое написать... Совсем не просто окажется.
--------- Ничто не сближает людей так, как совместное преступление.
