Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Автоподгонка изображений в background


Автор: ExPlay 13.3.2008, 12:27
Всем привет! Подскажите пожалуйста есть ли такой скрипт который делал бы автоподгонку изображения "background" в окне браузера????? Очень нужно! Если пишу не туда - извиняюсь !!

Автор: bars80080 13.3.2008, 12:49
что имеется ввиду: "автоподгонка"?

свойство background позволяется использовать заливку, картинку, повторять её сколько только по одному краю, замостить или вообще один раз показать, загнать в один из углов

или имеется ввиду изменение размера картинки в фоне? тогда нет, надо использовать тэг <img>

Автор: ExPlay 13.3.2008, 13:10
Цитата(bars80080 @ 13.3.2008,  12:49)
что имеется ввиду: "автоподгонка"?

свойство background позволяется использовать заливку, картинку, повторять её сколько только по одному краю, замостить или вообще один раз показать, загнать в один из углов

или имеется ввиду изменение размера картинки в фоне? тогда нет, надо использовать тэг <img>

Ладно объясню в деталях: У меня есть какой то рисунок, у него разрешение 1024 на 768! Когда я вставляю этот рисунок в тэг background, эта картинка отображается , но только картинка можно так сказать "плодится", т.е. их не одна а две, три и т.д.! Поэтому я ищу скрипт который бы автоматически сжимал(растягивал) картинку в тэге background! Насчёт самому её сжимать разжимать это можно сделать, а как у других людей будет это смотреться?? Плохо! Вот мне бы и хотелось этот маленький недочёт убрать! А насчёт тэга img- он просто вставляет картинку с отдельными параметрами! http://ipicture.ru/

Автор: bars80080 13.3.2008, 13:33
ну, всё же есть понятия - background - это атрибут, обозначающий фон, чтобы он не плодился достаточно задать:
Код

background-repeat: no-repeat;

но тогда при большом разрешении (1440х1024) побокам появятся полоски залитые фоновым цветом

если вам нужны манипуляции с изображение, то надо использовать тэг <img>, у которого есть такие параметры как ширина и высота:
Код

img { width: 100%; height: 100%; }

вам остаётся использовать два слоя, первый с картинкой, второй абсолютно позиционируемый с фоном:
Код

<html><head>
<style>
body { margin: 0px; padding: 0px; }
#fon img { width: 100%; height: 100%; }
#page { position: absolute; top: 0px; left: 0px; width: 100%; }
</style>
</head>
<body>
<div id="fon"><img src="zzz.jpg" /></div>
<div id="page">
content
</div>
</body>
</html>

правда, в этом случае картинка будет икажать при изменении формы окна

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)