Большое фоновое изображение Для сайта.

[taran]

Доброго времени суток. уважаемые коллеги.

Есть .jpg изображение размером 1600px X 1600px. Как сделать его фоновым для сайта. Так что-бы фото растягивалось на 100% монитора вне зависимости от размера монитора пользователя?

Google не дал адекватного ответа. Стакой проблемой сталкиваюсь в первый раз.

Edited April 1, 2010 by taran

[ShumNo]

А изображение непосредственно растягивающимся сделать нельзя так как при разном разрешении экрана будет теряться пропорции.

Как вариант это к левому, правому и другим краям изображения прилепить еще небольшую картинку на 1 пиксель, которая уже и будет растягиваться в зависимости от разрешения экрана. Либо эти боковые картинки может заменить фон, только боковые части основного изображения должны красиво переходить в этот самым фон, чтобы не было ощущения отчужденности графики.

Хотя дополню, что при таком разрешении изображения может вообще нет смысла, что-то мудрить. Просто у тех у кого 1024*768 у них будет показываться только часть изображения, а у тех у кого 1600*1200 будет полностью

Edited April 1, 2010 by ShumNo

[Mila]

А изображение непосредственно растягивающимся сделать нельзя так как при разном разрешении экрана будет теряться пропорции.

Очень даже можно.

Добавляете изображение бекграундом, при этом указываете ему width: 100%; height: 100%;

или, если изображение нестандартное (слишком узкое или еще какое) то только width: 100%;

[mishka]

Очень даже можно.

Добавляете изображение бекграундом, при этом указываете ему width: 100%; height: 100%;

или, если изображение нестандартное (слишком узкое или еще какое) то только width: 100%;

Пожалуйста привидите пример кода html/css.

Для меня честно говоря это откровение что бг можна растягивать.("изображение бекграундом, при этом указываете ему width: 100%; height: 100%;")

Картинку можна растягивать. По html ее в самом низу возле боди, на абсолют с шириной высотой, (для ие6 нужен будет експрешн, для ие7 возможно тоже нужен будет). А главному блоку релейтив и z-index чтобы поверх картинки все было.

Но как уже говорилось

А изображение непосредственно растягивающимся сделать нельзя так как при разном разрешении экрана будет теряться пропорции

пропорции гулять будут, и картинку у когото сплющит, у когото растянет.

[locky]

Мне кажется ресайз растровых изображений по размеру монитора - это дурной тон. В любом случае они или деформируются, или появятся артефакты. И вообще, всегда можно найти более логичное дизайнерское решение

Edited April 8, 2010 by locky

[RF9400]

это надо прописать в css:

html, body{
	margin:0px;
	padding:0px;
	background-image:url(1600x1600.jpg);
	background-repeat:no-repeat; */ чтобы не копировалось на больших экранах! */
	width:100%; */ чтобы растягивалось на маленьких */
	height:100%; */ чтобы растягивалось на маленьких */
}

есть другой способ пиши на RF9400@mail.ru

[Vlad]

Фоновое изображение обычно не растягивают, а размещают, скажем, по центру веб-страницы. У кого маленькое разрешение - увидят только центральную часть, у кого большое разрешение - увидят все.

Растянуть фон гипотетически можно: либо через свойство CSS3 background-size, это более изящное решение; либо рисунок ставят в качестве нижнего слоя и уже масштабируют как угодно.

[psywalker]

CSS3 background-size

Ну вот это я думаю ещё рановато.

либо рисунок ставят в качестве нижнего слоя и уже масштабируют как угодно.

А вот это уже используют на многих сайтах.

[Vlad]

Ну вот это я думаю ещё рановато.

Как раз уже не рано. Многие браузеры это свойство поддерживают либо напрямую, либо в качестве расширений. Типа -webkit-background-size, -moz-background-size, -o-background-size. Один IE понимает только с версии 9.0, по другому говоря, в настоящее время никак не понимает.

[psywalker]

Один IE понимает только с версии 9.0, по другому говоря, в настоящее время никак не понимает.

Хорошо, а что с ИЕ6-8 делать прикажите сударь?

[Vlad]

Хорошо, а что с ИЕ6-8 делать прикажите сударь?

Да как обычно - отдельный стиль для IE написать без всякого масштабирования. Паллиатив конечно, но что еще делать!

[psywalker]

Да как обычно - отдельный стиль для IE написать без всякого масштабирования. Паллиатив конечно, но что еще делать!

Согласен.

[delch]

Фоновое изображение обычно не растягивают, а размещают, скажем, по центру веб-страницы. У кого маленькое разрешение - увидят только центральную часть, у кого большое разрешение - увидят все.

Растянуть фон гипотетически можно: либо через свойство CSS3 background-size, это более изящное решение; либо рисунок ставят в качестве нижнего слоя и уже масштабируют как угодно.

Простите за оффтоп. Вот по 2му методу где можно почитать принцип применения?

[psywalker]

Простите за оффтоп. Вот по 2му методу где можно почитать принцип применения?

http://www.xiper.net/css/properties/background-size.html

А вообще в гугле полно инфы про это свойство.

[Vlad]

Простите за оффтоп. Вот по 2му методу где можно почитать принцип применения?

Напиши мне письмо, я тебе справочник по CSS вышлю. В нем есть описание этого свойства, примеры, картинки и браузеры где работает, а где нет.