Подскажите с фиксированным фоном

[Мужцкий Чел]

В чем собстввенно проблема. Я хочу сделать дизайн с фиксированным фоном во всю ширину и длину страницы.

Я знаю что можно это сделать через дивы например, но важно не это. Как мне сделать так что бы заходя на страницу у пользователя определялась разрешение монитора и в соответствии с этим на фон выставлялась нужная картинка. Помогите! Очень прошу! Облазил весь гугл и яндекс, не чего нету. Нашел только вариант с разными страницами...тобиш пользователь заходит на сайт если у него одно разрешение попадет на одну страницу, если другое то на другую.Этот вариант мне не катит так как придется дублировать все страницы.

Попрошу поподробней разьяснить пожалуста.

Заранее спасибо.

Edited January 12, 2011 by Мужцкий Чел

[Vlad]

Вариантов несколько:

1. Картинку положить вниз и задать ей размер 100% по ширине. Контент выводить поверх картинки. Плохой способ.

2. Сделать несколько фоновых картинок под разное разрешение, через JS отслеживать размер окна, менять картинку на лету. Тоже плохой.

3. Фон разрезать на части и раскидать их по углам окна. Классика уже!

4. Масштабировать через CSS3. Работает не везде.

Короче, вариантов не так и много получается действенных.

[psywalker]

2. Сделать несколько фоновых картинок под разное разрешение, через JS отслеживать размер окна, менять картинку на лету. Тоже плохой.

А почему вот этот хреновый? И вообще зачем делать несколько разрешений? Почему бы просто не проверять размеры экрана и делать картинку нужного размера?

[Мужцкий Чел]

Вариантов несколько:

1. Картинку положить вниз и задать ей размер 100% по ширине. Контент выводить поверх картинки. Плохой способ.

2. Сделать несколько фоновых картинок под разное разрешение, через JS отслеживать размер окна, менять картинку на лету. Тоже плохой.

3. Фон разрезать на части и раскидать их по углам окна. Классика уже!

4. Масштабировать через CSS3. Работает не везде.

Короче, вариантов не так и много получается действенных.

Влад скажите, я расчитывал что вероятней всего мне расскажут про JS, но вы написали что это плохой способ. Чем же он плох? долго грузит? не везде работает?

[satantx]

html {
		background: url(images/bg.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
}

Works in:

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+ (Opera 9.5 supported background-size but not the keywords)

Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)

[Vlad]

Обработчик обычно вешают на событие onresize и тогда при изменении размеров окна начинаются заметные подтормаживания со сменой картинки. Если изменение размеров ставить на onload, тогда при последующем изменении размера окна картинка меняться не будет. Тут важно помнить, что не у всех пользователей браузер открыт на весь экран и что окно может в процессе работы меняться. А если еще учесть, что есть нестандартные разрешения на нетбуках, то мне кажется эта идея вообще не целесообразной.

[satantx]

На jquery: https://github.com/srobbin/jquery-backstretch

Edited January 12, 2011 by satantx

[psywalker]

Обработчик обычно вешают на событие onresize и тогда при изменении размеров окна начинаются заметные подтормаживания со сменой картинки. Если изменение размеров ставить на onload, тогда при последующем изменении размера окна картинка меняться не будет. Тут важно помнить, что не у всех пользователей браузер открыт на весь экран и что окно может в процессе работы меняться. А если еще учесть, что есть нестандартные разрешения на нетбуках, то мне кажется эта идея вообще не целесообразной.

Спасибо, понял. Согласен.

[Мужцкий Чел]

Обработчик обычно вешают на событие onresize и тогда при изменении размеров окна начинаются заметные подтормаживания со сменой картинки. Если изменение размеров ставить на onload, тогда при последующем изменении размера окна картинка меняться не будет. Тут важно помнить, что не у всех пользователей браузер открыт на весь экран и что окно может в процессе работы меняться. А если еще учесть, что есть нестандартные разрешения на нетбуках, то мне кажется эта идея вообще не целесообразной.

Большое спасибо. Все понятно. Обидно правда

[rus]

а адаптивная разметка тут разве не прокатит?

[Vlad]

Думаю, что не прокатит адаптивная разметка. По условию СТ хочет фон на всю область веб-страницы чтобы масштабировался. Т.е. надо будет заготовить несколько картинок под разные диапазоны разрешений и подсовывать их через JS. Опять же это не решит проблему при плавном изменении размеров окна, размер картинок будет меняться скачкообразно, ну и работы лишней полно.

В общем идея масштабирования через скрипты либо слишком затратна (картинки подготовить в разных разрешениях), либо имеет ряд минусов (подтормаживания, скрипт надо писать опять же, jQuery с плагинами загружать), так что считаю, что овчинка выделки не стоит. Вот CSS3, как satantx предложил, перспективнее.