Масштабирование изображения фона на CSS: возможно ли?

Apologet · 04.11.2009, 19:05

Мир всем!
Прошу подсказку в решении такой задачи. Надо сделать "резиновую" страничку, но дизайнер нарисовал для фона изображение 1600 на 1600 пикселей (и оно уже согласовано с заказчиком).
Как сделать, чтоб изображение масштабировалось в зависимости от разрешения монитора посетителя?
Если пользователь открывает страничку на мониторе с разрешением 1024х768, то страница растягивается с таким фоном и появляется горизонтальная полоса прокрутки,
а задать параметры в теге
<body background="images/fon.jpg">
нельзя. Можно ли решить проблему с помощью CSS? Заранее благодарю...

iDeViL · 04.11.2009, 19:29

первое, что приходит в голову:
<img src=... style="position: absolute; top: 0px; left: 0px; width: 100%;" width="100%" />

поэксперементируйте, где лучше width, в style или в параметрах картинки. Должно сработать

Apologet · 05.11.2009, 06:27

Цитата:

Сообщение от iDeViL

первое, что приходит в голову:
<img src=... style="position: absolute; top: 0px; left: 0px; width: 100%;" width="100%" />

поэксперементируйте, где лучше width, в style или в параметрах картинки. Должно сработать

img src не подходит, так как картина должна быть фоном, т.е. поверх нее должен быть другой контент.
Я тут сам кое-что накрапал, вроде работает. Может кому пригодится:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Фоновый рисунок</title>
<style type="text/css">
.fon {
width: 100%;
border: 0;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
</style>
</head>
<body>
<div>

</div>
<p><img class="fon" src="images/ostrov.jpg" alt="фон" /></p>
</body>
</html>

iDeViL · 05.11.2009, 09:50

собственно тоже самое, только забили один стиль цсс и z-index присвоили. В вашем случае я бы советовал сделать как я, только в стиль дописать z-index. Все таки одна строчка против кучи. И смотреться лучше будет, и писанины меньше. И не нужно картинку в <p> </p> ставить, может вызвать проблеммы. А еще её желательно самой первой описать, сразу после <body>, т.к. может возникнуть ситуация, когда вы забудете про фон и случайно еще чему-нибудь установите тот же индекс, и внизу будет то, что в коде выше.

Apologet · 05.11.2009, 10:49

Цитата:

Сообщение от iDeViL

собственно тоже самое, только забили один стиль цсс и z-index присвоили. В вашем случае я бы советовал сделать как я, только в стиль дописать z-index. Все таки одна строчка против кучи. И смотреться лучше будет, и писанины меньше. И не нужно картинку в <p> </p> ставить, может вызвать проблеммы. А еще её желательно самой первой описать, сразу после <body>, т.к. может возникнуть ситуация, когда вы забудете про фон и случайно еще чему-нибудь установите тот же индекс, и внизу будет то, что в коде выше.

Да, согласен. Спасибо за подсказку.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Масштабирование сайта	Philips	HTML, CSS, JavaScript	1	26.06.2012 15:49
Масштабирование изображений в CSS	forsite	HTML, CSS, JavaScript	3	04.11.2008 23:58
Css масштабирование изображений	Settler	HTML, CSS, JavaScript	3	19.04.2007 13:34
Масштабирование Flash	anton	Технологии Flash	1	22.09.2005 23:40
Масштабирование Html	anton	HTML, CSS, JavaScript	3	22.09.2005 18:36

04.11.2009, 19:05	#1
Apologet	Мир всем! Прошу подсказку в решении такой задачи. Надо сделать "резиновую" страничку, но дизайнер нарисовал для фона изображение 1600 на 1600 пикселей (и оно уже согласовано с заказчиком). Как сделать, чтоб изображение масштабировалось в зависимости от разрешения монитора посетителя? Если пользователь открывает страничку на мониторе с разрешением 1024х768, то страница растягивается с таким фоном и появляется горизонтальная полоса прокрутки, а задать параметры в теге <body background="images/fon.jpg"> нельзя. Можно ли решить проблему с помощью CSS? Заранее благодарю...

04.11.2009, 19:29	#2
iDeViL	первое, что приходит в голову: <img src=... style="position: absolute; top: 0px; left: 0px; width: 100%;" width="100%" /> поэксперементируйте, где лучше width, в style или в параметрах картинки. Должно сработать

05.11.2009, 09:50	#4
iDeViL	собственно тоже самое, только забили один стиль цсс и z-index присвоили. В вашем случае я бы советовал сделать как я, только в стиль дописать z-index. Все таки одна строчка против кучи. И смотреться лучше будет, и писанины меньше. И не нужно картинку в <p> </p> ставить, может вызвать проблеммы. А еще её желательно самой первой описать, сразу после <body>, т.к. может возникнуть ситуация, когда вы забудете про фон и случайно еще чему-нибудь установите тот же индекс, и внизу будет то, что в коде выше.