Обновить

Комментарии 50

Как идея прикольно, конечно, но вообще, дизайнерам за такие макеты надо по рукам давать.
Хотелось бы, чтобы, хоть иногда, дизайнеры читали, что тут написано. Пункт №1, как я понимаю самый важный.
Но с другой стороны, скучать не приходится :)
Больше сайтов, хороших и разных!
Паутина и современные браузеры дают такие огромные возможности, что их грех не использовать.
Макет на удивление вменяемый — логично, что чем меньше размер окна, тем меньше должны быть элементы, в особенности бэкграунд. Почему, то, что на большом разрешении показывается как подвал/шапка на другом разрешении должно быть половиной экрана?
НЛО прилетело и опубликовало эту надпись здесь
Дизайнер осёл ещё потому, что это Ужастно тормозит при скроллинге. (по крайнер мере в Opera).
Вообще, об этом уже писалось на сайте, о котором обычно не упоминают.
У самого первым делом родилось желание пристрелить горе-дизайнера, который фотографии на фон бросает из-за собственной… Хм… Даже не знаю, из-за чего такое можно делать.
И даже после прочтения всех мытарств желание только укрепилось.
Пожалуй даже вырывать ногти и вбивать в пальцы гвозди
Полезно. Спасибо.
слишком обобщенно в приведенной вами статье…
Потому что у меня первоисточник)
Ваша статья — хороший и полный пример реализации метода!
Нарушаются пропорции изображения :)
Зато на ней сразу видно, что фон меняет размеры ))
А что будет, когда текста по высоте будет больше, чем высота картинки? Да и с пропорциями на экране явный глюк ;)
НЛО прилетело и опубликовало эту надпись здесь
«bottom:0; /*картинка всегда будет находиться внизу страницы*/» — что-то картинка не всегда находится внизу страницы… А было бы неплохо — т.к. небо светлое, было бы лучше, чтобы оно переходило в белый, если уж экран повыше, чем картинка.
Мне как раз понадобиться сейчас. Спасибо. :)
только внизу и в IE у меня большой белый промежуток.
Вот у меня тоже… Только такое чувство, что она там специально получился :)
Только что сделала по-своему, вроде даже попроще. Но картинка полностью внизу. Теперь не могу понять — какая задача стояла…
А еще вот думаю, что не для любой картинки такой способ подойдет. Более «гладкие» картинки, скорее всего в «любимом» ИЕ будут некрасиво масштабироваться. Эта вся в травке, зазубринках — поэтому, может, нормально смотрится.
у меня задача стоит с разными фонами… При каждой загрузке разный фон. Но почти на всех есть травка :)))))
По крайней мере для ие есть img {-ms-interpolation-mode: bicubic}
Эт свойство на производительность ие влияет прилично вроде как
Я бы учел возможность ресайза окна, и сделал вот так:

  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>
Поправочка:

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>
полезно — спасибо…
отличная «рыба»!
Конечно вариант, но я бы дал дизайнеру понять, что пусть он меняет макет и думает головой, т.к. делает он для веба а не для цирка шапито.

Это плохо хотя бы потому, что правый клик на этом «фоне» не будет работать как того ожидает пользователь.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Спасибо дизайнеру за приятную картинку.
5 минут отдохнул на работе.
при большом разрешении после перезагрузки страницы фон уползает вверх FF 3.0.6, Linux, 1920x1200
cейчас посмотрите — добавил bugfix, с работы не могу — закрыт доступ :)
Пару лет назад заглушку себе на сайт набросал. Небо — вертикальный и горизонтальный полупрозрачный градиент, наложенные один на другой. Сверху слой с травой, а ещё выше контент.
apostolstudio.com

Просьба к коду не придираться. Там всё было на скорую руку набросано, но так и не было доделано по причине отсутствия надобности в сайте.
:) таки таким дизайнерам как Вы вообще слово «придраться» не подходит — а верстка это уже второе :)
Дима — это не тот Апостол :) тот Николай… да и вряд ли он на Хабре появиться :)
Да, Николай в первую очередь дизайнер. А я — веб-разработчик. По поводу «к коду попридираться» — это ко мне. :)
>>нам необходимо будет поиграться с абсолютным позиционирование.

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

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

ужас! две ошибки в таком коротком предложении! (хрен с ней, с точкой, это без нее две ошибки).
всю школу по литературе было пять, по русскому — 3 :) Мысли вперед рук бегут :)
ппц, надо было столько городить.
делаешь картинку квадратной, указываешь только ширину — высота автоматически подстраивается под ширину, следовательно 100% и она будет тянуться как надо.
всеми вами нелюбимая студия применила это ещё в 2005-ом: www.queengroup.ru/
Насколько знаю, браузеры масштабируют картинки методом nearest pixel, выглядит ужасно.
При маленьком размере окна — футер подкладывается под контент :(
Это не футер! Это все одна картинка!
Да вижу я что там картинкой, а что нет.
Футер -> Копирайт, вот он подкладывается под контент. Так яснее!?
спасибо, пригодилось! немного видоизменил и у меня на фоне отображается теперь пропорциональное изображение на всю рабочую область, но вот непонятно почему в хроме не захотело работать и пришлось писать костыль :(
Радует что статья пригодилась через 2 года )))
Я ее использовал и после ее публикации, но дизайнеры с заморочками попадаются не так часто и вчера попался такой и вернулся к этой статье.
Можете подсказать почему в Хроме выпендривается такая (модернизированная) конструкция? сайт ddd.sumy.ua
Сейчас там стоит заглушка, но как по мне это не вариант.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации