Масштабируемая картинка на фоне сайта

[@jabber]

забавно =)

[@AztEK]

Как идея прикольно, конечно, но вообще, дизайнерам за такие макеты надо по рукам давать.

[@KrH_EF]

Хотелось бы, чтобы, хоть иногда, дизайнеры читали, что тут написано. Пункт №1, как я понимаю самый важный.
Но с другой стороны, скучать не приходится :)

[@Ogra]

Больше сайтов, хороших и разных!
Паутина и современные браузеры дают такие огромные возможности, что их грех не использовать.
Макет на удивление вменяемый — логично, что чем меньше размер окна, тем меньше должны быть элементы, в особенности бэкграунд. Почему, то, что на большом разрешении показывается как подвал/шапка на другом разрешении должно быть половиной экрана?

[@l2k]

Дизайнер осёл ещё потому, что это Ужастно тормозит при скроллинге. (по крайнер мере в Opera).
Вообще, об этом уже писалось на сайте, о котором обычно не упоминают.

[@kibizoidus]

У самого первым делом родилось желание пристрелить горе-дизайнера, который фотографии на фон бросает из-за собственной… Хм… Даже не знаю, из-за чего такое можно делать.
И даже после прочтения всех мытарств желание только укрепилось.

[@marazm]

Пожалуй даже вырывать ногти и вбивать в пальцы гвозди

[@woworks]

Полезно. Спасибо.

[@do1banek]

Похожее уже было kolyuchii.habrahabr.ru/blog/52548/

[@Tvarb]

слишком обобщенно в приведенной вами статье…

[@kolyuchii]

Потому что у меня первоисточник)
Ваша статья — хороший и полный пример реализации метода!

[@WilliamKidd]

Что вы думаете про эту статью — www.cssplay.co.uk/layouts/background?

[@Tvarb]

Нарушаются пропорции изображения :)

[@flaresun]

Зато на ней сразу видно, что фон меняет размеры ))

[@zerobrain]

А что будет, когда текста по высоте будет больше, чем высота картинки? Да и с пропорциями на экране явный глюк ;)

[@NervousSnake]

«bottom:0; /*картинка всегда будет находиться внизу страницы*/» — что-то картинка не всегда находится внизу страницы… А было бы неплохо — т.к. небо светлое, было бы лучше, чтобы оно переходило в белый, если уж экран повыше, чем картинка.

[@kartoha]

Мне как раз понадобиться сейчас. Спасибо. :)

[@kartoha]

только внизу и в IE у меня большой белый промежуток.

[@NervousSnake]

Вот у меня тоже… Только такое чувство, что она там специально получился :)
Только что сделала по-своему, вроде даже попроще. Но картинка полностью внизу. Теперь не могу понять — какая задача стояла…

[@NervousSnake]

А еще вот думаю, что не для любой картинки такой способ подойдет. Более «гладкие» картинки, скорее всего в «любимом» ИЕ будут некрасиво масштабироваться. Эта вся в травке, зазубринках — поэтому, может, нормально смотрится.

[@kartoha]

у меня задача стоит с разными фонами… При каждой загрузке разный фон. Но почти на всех есть травка :)))))

[@kolyuchii]

По крайней мере для ие есть img {-ms-interpolation-mode: bicubic}

[@0range]

Эт свойство на производительность ие влияет прилично вроде как

[@bebopkid]

Я бы учел возможность ресайза окна, и сделал вот так:

1. <script language="javascript">
2. function test(){
3.  var h = 400 + document.getElementById('page').offsetHeight;
4.  if (h > 600) {
5.   document.getElementById('main').style.height = h + 'px';
6.  }
7. }
8. var ie=!!window.attachEvent;
9. window[ ie ? 'attachEvent' : 'addEventListener' ]( ie ? 'onresize' : 'resize', test );
10. </script>

[@bebopkid]

Поправочка:

Copy Source | Copy HTML

1. <script language="javascript">
2. function test(){
3.  var h = 400 + document.getElementById('page').offsetHeight;
4.  if (h > 600) {
5.   document.getElementById('main').style.height = h + 'px';
6.  }
7. }
8. var ie=!!window.attachEvent;
9. window[ ie ? 'attachEvent' : 'addEventListener' ]( ie ? 'onresize' : 'resize', test, false );
10. </script>

[@Tvarb]

полезно — спасибо…

[@webmasters_by]

есть еще такой вариант в jQuery — buildinternet.com/live/supersized/

[@qizz]

отличная «рыба»!

[@TiGR]

Конечно вариант, но я бы дал дизайнеру понять, что пусть он меняет макет и думает головой, т.к. делает он для веба а не для цирка шапито.

Это плохо хотя бы потому, что правый клик на этом «фоне» не будет работать как того ожидает пользователь.

[@dinich]

Спасибо дизайнеру за приятную картинку.
5 минут отдохнул на работе.

[@Chikiro]

при большом разрешении после перезагрузки страницы фон уползает вверх FF 3.0.6, Linux, 1920x1200

[@Tvarb]

cейчас посмотрите — добавил bugfix, с работы не могу — закрыт доступ :)

[@Apostol]

Пару лет назад заглушку себе на сайт набросал. Небо — вертикальный и горизонтальный полупрозрачный градиент, наложенные один на другой. Сверху слой с травой, а ещё выше контент.
apostolstudio.com

Просьба к коду не придираться. Там всё было на скорую руку набросано, но так и не было доделано по причине отсутствия надобности в сайте.

[@Tvarb]

:) таки таким дизайнерам как Вы вообще слово «придраться» не подходит — а верстка это уже второе :)

[@Trogo]

Дима — это не тот Апостол :) тот Николай… да и вряд ли он на Хабре появиться :)

[@Apostol]

Да, Николай в первую очередь дизайнер. А я — веб-разработчик. По поводу «к коду попридираться» — это ко мне. :)

[@nicothin]

>>нам необходимо будет поиграться с абсолютным позиционирование.

пропущена последняя «м».

>>Буду рад если кому то пригодиться

ужас! две ошибки в таком коротком предложении! (хрен с ней, с точкой, это без нее две ошибки).

[@Tvarb]

всю школу по литературе было пять, по русскому — 3 :) Мысли вперед рук бегут :)

[@zorba_buddha]

ппц, надо было столько городить.
делаешь картинку квадратной, указываешь только ширину — высота автоматически подстраивается под ширину, следовательно 100% и она будет тянуться как надо.
всеми вами нелюбимая студия применила это ещё в 2005-ом: www.queengroup.ru/

[@kolen]

Насколько знаю, браузеры масштабируют картинки методом nearest pixel, выглядит ужасно.

[@cinic]

При маленьком размере окна — футер подкладывается под контент :(

[@Red_Lemur]

Это не футер! Это все одна картинка!

[@cinic]

Да вижу я что там картинкой, а что нет.
Футер -> Копирайт, вот он подкладывается под контент. Так яснее!?

[@san4ez]

спасибо, пригодилось! немного видоизменил и у меня на фоне отображается теперь пропорциональное изображение на всю рабочую область, но вот непонятно почему в хроме не захотело работать и пришлось писать костыль :(

[@Tvarb]

Радует что статья пригодилась через 2 года )))

[@san4ez]

Я ее использовал и после ее публикации, но дизайнеры с заморочками попадаются не так часто и вчера попался такой и вернулся к этой статье.
Можете подсказать почему в Хроме выпендривается такая (модернизированная) конструкция? сайт ddd.sumy.ua
Сейчас там стоит заглушка, но как по мне это не вариант.