Смарт ТВ 

Сделать фон весь рабочий стол. Создание заставок для мобильных устройств. Изменение фона рабочего стола для всех пользователей в Windows

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

Делаем обои на рабочий стол во весь экран

Сначала надо выяснить какого точно размера обои вам нужны.

Для этого жмем кнопку ПУСК, находим строчку «Панель управления» — жмем. Появится большой список. Не зависимо от того, какая версия виндоус у вас установлена, находим значок «Экран» и нажимаем на него. Появится примерно такое окно, как на картинке. У меня сейчас установлен windows-7, для других версий окно немного другое, но суть остается та же. Вам надо найти функцию «Настройки разрешения экрана».

После того как вы нажмете «Настройки разрешения экрана», появится другое окно, где вам нужна строчка «Разрешение». Напротив нее вы видите цифры, выражающие размер вашего монитора в пикселях. Это и есть размер картинки, который вам нужен для того, чтобы сделать обои во весь экран. Как видно на рисунке, у меня размер экрана 1366 пикселей в ширину и 768 пикселей в высоту. У вас может быть другое.

Теперь сохраняем на свой комп картинку, которую вы хотите применить в качестве обоев для рабочего стола. Самый простой способ подогнать размеры обоев, это воспользоваться программой Фотошоп. Но будем исходить из того, что она не установлена на ваш ПК, и используем другую программу, которая есть на любом компьютере с операционной системой Виндоус.

Находим картинку в папке и жмем на нее правой кнопкой мыши. Выбираем «Открыть с помощью». Вылезет список, в котором вам надо нажать на строчку «Microsoft Office Picture Manager» и картинка откроется в этой программе.

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

Подгоняем обычные обои на широкий экран

1 способ, если фотографию можно обрезать по высоте

Вам надо нажать на кнопку «Рисунок», а в выпавшем списке на «Изменить размер».

Отмечаем «Процент от исходных ширины и высоты» и выставляем нужный процент опытным путем. Ширина картинки у нас 1024, а надо 1366 пикселя, то есть она должна быть больше примерно на 33%. Прибавляем 33 к исходным ста процентам и вписываем в поле 133%. Картинка увеличивается.

Мы можем посмотреть новый размер картинки тут же — «Итоговый размер». Видим, что новый размер наших обоев стал 1362х1021. Не забываем нажать на кнопку ОК.

Если у вас стандартные пропорции экрана, то этого обычно достаточно, чтобы увеличить размер обоев на рабочий стол. Но если экран широкий, как у меня, то вы можете заметить, что высота картинки стала больше, чем нужно. Поэтому мы отрежем лишнее, для чего снова нажмем на «Рисунок» и выберем строчку «Обрезать».

Эти обои обрезать будем снизу. Высота у нас 1024, а нужно 768, то есть отрезаем 256 пикселей. Жмем кнопку ОК и сохраняем рисунок — «Файл» — «Сохранить». В зависимости от того, что изображено на картинке, можно отрезать низ или верх, либо немного сверху и немного снизу.

2-й способ увеличения картинки, если рисунок не обрезать

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

Увеличиваем рисунок до нужного размера как описано в первом способе, но так, чтобы ни одна из сторон не была больше, чем нужно. Если у вас широкий экран, а картинка стандартных размеров, то высоту мы увеличиваем, а ширина получится меньше размера экрана. Сохраняем.

Ставим обои на рабочий стол и подбираем цвет экрана (незаполненных рисунком полосок по сторонам) под цвет картинки. Для этого снова заходим в ПУСК — Панель управления — Экран.

Жмем на строчку «Изменение фонового рисунка рабочего стола». Через «обзор» находим сохраненный рисунок, «Положение изображения» выбираем «По центру», ниже нажимаем на строчку «Изменить цвет фона».

рис. цвет фона

Появляется окошко с палитрой. Подбираем наиболее подходящий для вашей картинки цвет, нажимаем ОК. Окно с палитрой исчезает, жмем на кнопку «Сохранить изменения».

И, что еще следует упомянуть, если картинка совсем маленькая, а вы пытаетесь увеличить ее во весь экран, то может пострадать качество изображения.

Если статья помогла вам сделать обои на весь экран , пожалуйста, лайкните ниже, или напишите комментарий.

windows xp

Как сменить обои на рабочем столе, если вы скачали новые обои из Интернета, или принесли новые обои на диске, или желаете установить в качестве обоев любимое фото?

Измените параметр Рабочего стола - Фон :

  • вызовите контекстное меню для объекта Рабочий стол , щелкнув правой кнопкой мыши на любом свободном месте Рабочего стола, но не на объектах стола, иначе будет вызвано контекстное меню, связанное с данными объектами;
  • в раскрывшемся меню выберите команду Свойства. Перед вами появится окно (рис. 1);
  • выберите вкладку Фон , щелкнув левой кнопкой мыши;
  • просмотрите с помощью полосы прокрутки список графических файлов в окне Рисунок рабочего стола;
  • щелчком мыши на значке графического файла выберите рисунок;
  • выберите способ расположения рисунка на Рабочем столе щелчком на кнопке Расположить . В раскрывшемся списке команд выберите команду Растянуть , если вы хотите поместить рисунок на весь экран, команду По центру, чтобы расположить рисунок в центре экрана, или команду Рядом, чтобы размножить выбранный рисунок мозаикой по всему экрану.
  • в окне предварительного просмотра посмотрите, как будет выглядеть Рабочий стол с выбранным вами рисунком;
  • щелкните на кнопке Применить , чтобы увидеть результат изменений на экране (окно Свойства: Экран останется раскрытым).

Замечание: Через некоторое время вам надоедят все стандартные рисунки и появится желание найти что-нибудь новенькое.

Чтобы вывести на экран необходимые обои, нажимаете кнопку Обзор (Выбрать из каталога) 3 и с помощью проводника Windows находите файл с этим рисунком на вашем компьютере. Выбранный файл появится в списке Фоновый рисунок 2 Теперь нажимаете кнопку Применить , а потом ОК и ваш рисунок на экране.
Обращаю внимание только на то, что рисунок должен находиться на жестком диске, а не на CD. То есть, понравившийся рисунок нужно сначала скопировать с CD - диска, а потом уже устанавливать его фоновым рисунком.

Но, возможно, вам и этого покажется мало. Вы пожелаете сделать фоновым рисунком свои фотографии. Это тоже возможно.

Только желательно, чтобы рисунок соответствовал вашему экранному разрешению. Если разрешение экрана 1024 х 768, то и размер фотографии должен быть таким же. Потому что, если фотография больше экрана, то на экране разместится только часть фотографии и не обязательно лучшая.
Чтобы узнать какое разрешение экрана Вашего компьютера, зайдите во вкладку Параметры (Свойства: Экран – Параметры).

Теперь Вы в курсе какого разрешения Вам нужны обои, чтобы они смотрелись нормально, без каких-либо искажений.

Если размер фотографии будет меньше экрана, то тогда нужно будет в поле Расположение 4 выбирать вариант. Фотографию придется или разместить по центру или растянуть, или замостить ею экран, что, в любом случае, будет не очень красиво. Значит, фотографию нужно предварительно подготовить.

windows 7

1 вариант

  1. Пуск – Панель управления – Экран


  1. Слева панель управления настройками экрана – выбираем Изменение фонового рисунка рабочего стола


  1. С помощью кнопки Обзор найдем папку на компьютере, где Вы предварительно сохранили Обои рабочего стола


  1. Содержимое папки будет отображаться в окне, выбираем любую картинку и настраиваем отображение картинки с помощью кнопки Положение изображения – выбираем оптимальный вариант расположения.


  1. Фиксируем выбранные обои кнопкой Сохранить изменения.

2 вариант


Успешной Вам работы!

В всяком персональном компьютере имеется свое виртуальное рабочее место для пользователя. Оно так и именуется – «Рабочий стол». На нем расположены основные программные папки и элементы стремительной навигации по системным службам. На рабочем столе компьютера, также, как и на письменном столе в офисе, дозволено прибираться – менять местами документы, настраивать время, устанавливать календарь, убирать мусор в корзину, и, безусловно же, украшать свое рабочее место фото-обоями. Дабы прекрасный пейзаж обоев был максимального размера, нужно зайти в особый раздел по тому, как сделать фоновой рисунок на каждый экран.

Инструкция

1. Щелкните по рабочему столу вашего компьютера правой кнопкой мыши. Появится маленькое окно, представляющее из себя список команд. Выберите самую нижнюю службу «Свойства». Там вы сумеете настроить дизайн рабочего стола, а также другие параметры оформления интерфейса операционной системы, такие, как экранную заставку, всевозможные темы внешнего вида кнопок, служебных окон, меню «Пуск» и другие конфигурации. В новом возникшем окне перейдите по вкладке «Рабочий стол». В верхней части данного раздела для комфорта и наглядности будет изображен воображаемый монитор, тот, что отображает выбранные вами фоновые рисунки для рабочего стола.

2. Нижнее поле раздела «Рабочий стол» предуготовлено для независимого выбора фона рабочего стола – однообразного, в виде узорчатых обоев либо вставленного изображения. Обнаружьте окошко с прокруткой «Фоновой рисунок». В нем содержатся готовые обои на рабочий стол. В основном, это стандартная база обоев, таких как «Кофейня», «Лазурь», «Мир», «Пустыня» и другие. Эти базовые фоновые рисунки первоначально входят в комплект ОС Windows и присутствуют у всех ее пользователей. Помимо стандартных изображений вы вправе добавить свои личные. Для этого нажмите справа от окошка «Фоновой рисунок» кнопку «Обзор». Выберите подходящий рисунок либо фотографию из надобной папки пользователя. Кликните «Ok», дабы добавить изображения в базу окна «Фоновой рисунок». Позже этого окончательно определитесь, оставить ли текущий рисунок рабочего стола либо сменить его на новейший.

3. Для того, дабы поменять фон на иной, обнаружьте его в списке фоновых рисунков при помощи двигающегося ползунка прокрутки. Выделите понравившийся объект. После этого щелкните кнопки «Применить» и «Ok». Зачастую этих действий бывает довольно для того, дабы рабочий стол сменил фон. Но потому что сделать фоновой рисунок механически на каждый экран получается не неизменно, то понадобится настроить его размеры самосильно. Перейдите в маленькое служебное окно «Расположение». Оно находится справа, под кнопкой «Обзор». Функция «Расположение» способна подстраивать размеры фоновых изображений под размеры рабочего стола. Их дозволено замостить в виде плитки, расположить по центру либо растянуть по каждой ширине экрана. Установите стрелочкой значение «Растянуть». Нажмите вновь «Применить» и «Ok», дабы метаморфозы вступили в силу. Вернитесь на рабочий стол. Сейчас выбранный вами фоновой рисунок будет всецело совпадать со каждой шириной и длиной рабочего стола и, соответственно, с размерами экрана вашего манитора.

Если вы хотите изменить фоновый рисунок рабочего стола, можете задать в его качестве безусловно всякое изображение, которое будет на вашем компьютере. Фотографии друзей, природные ландшафты и многое другое – все это делается парой кликов мышки.

Вам понадобится

  • Компьютер, изображения для рабочего стола.

Инструкция

1. Особенно легкой метод, тот, что дозволит вам задать собственное изображение в качестве фонового рисунка рабочего стола – контекстное меню самого изображения. Для того дабы установить картинку на заставку, вам необходимо поступить дальнейшим образом. Обнаружьте надобное вам изображение на компьютере и нажмите на нем правой кнопкой мышки. В контекстном меню выберите опцию «Сделать фоновым рисунком» либо же «Установить на рабочий стол» и нажмите «ОК». Вы также можете открыть надобную картинку программой по умолчанию и, кликнув на открывшемся изображении, исполнить вышеперечисленные действия.

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

3. Тут вы увидите серию стандартных изображений, включить которые дозволено, двукратно кликнув мышкой по любому из них. Если же типовые картинки вам не понравятся, вы можете предпочесть собственное изображение, нажав на кнопку «Обзор». В открывшемся окне выберите надобную вам картинку и кликните по кнопке «Открыть». Позже чего, в основном окне нажмите кнопку «ОК». Обои будут изменены.

В сети дозволено обнаружить массу дюже прекрасных фоновых рисунков для вашего компьютера. Есть целые сайты, специализирующиеся на сборе, каталогизации и распространении таких картинок. Подобрав одно (либо целый комплект) изображение, вам нужно будет заменить ветхие «обои» рабочего стола.

Инструкция

1. В Windows XP необходимо открыть окно свойств экрана – щелкнуть правой кнопкой мыши на свободном пространстве рабочего стола и в контекстном меню предпочесть пункт «Свойства».

2. После этого перейти на вкладку «Рабочий стол» и предпочесть надобную картинку одним из 2-х допустимых вариантов:- вы можете предпочесть всякую картинку в списке «Фоновый рисунок »;- вы можете нажать кнопку «Обзор» и обнаружить у себя в компьютере графический файл, тот, что вам огромнее нравится.

3. Позже того, как необходимая картинка для фона рабочего стола будет выбрана, останется только закрепить сделанные метаморфозы в настройках вашей операционной системы нажатием кнопки «OK».

4. Есть альтернативный вариант – вначале запустите Проводник Windows нажатием сочетания клавиш CTRL + E либо двойным щелчком по иконке «Мой компьютер».

5. После этого, перемещаясь по дереву папок в левой панели проводника, обнаружьте необходимую вам картинку и щелкните ее правой кнопкой мыши. В контекстном меню выберите пункт «Сделать фоновым рисунком рабочего стола». На этом процедура завершена.Данный метод действителен и для ОС Windows Vista и Windows 7 (помимо «исходной» версии), но там пункт в контекстном меню назван чуть напротив – «Сделать фоновым рисунком».

6. В ОС Windows Vista и Windows 7 (помимо «исходной» версии) действия будут отличаться. Вначале, как и в ОС Windows XP, щелкните правой кнопкой на свободном месте рабочего стола, но в контекстном меню вам необходимо предпочесть пункт «Персонализация».

7. После этого в списке настроек выберите «Фоновый рисунок рабочего стола».

8. Потом выберите картинку из имеющихся в вписке, либо щелкните кнопку «Обзор» и обнаружьте надобный вам файл изображения.

9. В заключение нажмите кнопку «OK» для фиксации сделанных изменений настроек ОС.

10. В ОС Windows 7 «Исходной» версии смена фона рабочего стола не предусмотрена. Сделать это вы можете с подмогой разных программ-твикеров, которых есть немалое число в сети. Скажем, дюже крошечная и простенькая утилита с именем Starter Wallpaper Changer. Она не требует установки, довольно запустить скачанный файл, нажать кнопку “Browse” («Обзор»), предпочесть в вашем компьютере надобную картинку и нажать кнопку “Apply” («Применить»). Метаморфозы вступят в силу позже перезагрузки ОС.

Видео по теме

Обратите внимание!
В новых версиях ОС Windows раздел «Свойства» именуется «Персонализация».

Пожалуй, с полной уверенностью сегодня можно утверждать, что времена, когда пользователи компьютеров и мобильных устройств скачивали для установки в качестве заставки на главный экран картинки, да еще и платили за это деньги, ушли в небытие. Современное программное обеспечение позволяет в два счета или установить понравившееся фото на «Рабочий стол» компьютера или экран телефона. О том, как сделать заставку простейшими методами, расскажем в статье. Но сразу же остановимся на вариантах установки изображений при помощи специализированных настроек, которые имеются в любой операционной системе, включая и стационарные, и мобильные.

Как сделать заставку на «Рабочий стол»: настройка персонализации

Несмотря на то что устаревшие версии Windows все еще пользуются некоторой популярностью у пользователей (например, та же XP), отталкиваться будем от последних модификаций. В них, как известно, наряду с классическими способами установки картинок на экран появились и более усовершенствованные методы.

Для начала давайте посмотрим, как сделать заставку экрана для компьютера.

Для этого через ПКМ на свободной части «Рабочего стола» нужно перейти к пункту персонализации, а затем в разделе фона просто выбрать картинку из стандартного набора, присутствующего в любой версии и сборке системы, или через кнопку обзора указать местоположение сохраненного на компьютере изображения. Об этом, по всей видимости, знают все. Попутно следует из списка выбрать параметры расположения картинки на экране и применить сделанные изменения.

Однако такой способ, если можно так сказать, выглядит уж слишком громоздким или, если хотите, «дедовским». В последних версиях Windows обращаться к вышеописанным опциям совершенно необязательно.

Достаточно просто выбрать нужное изображение, а затем через меню ПКМ на файле перейти к пункту установки его в качестве основного фона «Рабочего стола». При этом следует учесть, что картинка будет установлена во весь экран, поэтому при несовпадении пропорций самого изображения и экрана (или разрешения) могут наблюдаться некоторые искажения, но их, в принципе, можно исправить при помощи множества программ, называемых графическими редакторами.

Как сделать заставку на компьютер самостоятельно?

Как уже понятно из вышесказанного, оба метода хоть и просты в использовании, однако выглядят несколько неудобными. Поскольку тут основной проблемой является размер и разрешение картинки, которая по параметрам может не подходить под настройки экрана. Как сделать заставку в этом случае? Нет ничего проще, нежели воспользоваться самой примитивной программой для обработки графики Paint, входящей в стандартный набор предустановленного в Windows ПО.

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

Однако и это далеко не самый эффективный метод. Но как сделать заставку самостоятельно? Для этого лучше использовать более продвинутые редакторы. Если вы знаете хотя бы начальные азы работы с пакетом Photoshop, создать изображение, используя собственную фантазию, не так уж и сложно (тем более, что в самой программе имеется достаточно большое количество всевозможных шаблонов).

Создание заставок для мобильных устройств

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

После этого останется скопировать изображение на устройство и установить в качестве фона главного экрана через стандартные настройки.

Установка в качестве заставки для смартфона или планшета любого изображения

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

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

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

Краткий итог

Вот кратко и все, что касается создания и установки заставок на экраны компьютерных мониторов, ноутбуков и мобильных устройств. Конечно, это далеко не все доступные методы, а только некоторые из них (не говоря уже о программном обеспечении), зато самые простые и доступные любому, самому неподготовленному пользователю.

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

Цель данного урока разместить на сайте фоновую картинку, которая бы постоянно закрывала весь фон окна браузера. Что же конкретно нужно сделать:

  • заполнить всю страницу одним изображением без пробелов;
  • изменение размеров картинки при необходимости (уменьшении окна браузера);
  • сохранение пропорций изображения;
  • расположение изображения в центре страницы;
  • отсутствие полос прокрутки на странице;
  • кросс-браузерное решение, подходящее для разных браузеров;
  • реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

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; }

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; }

Решение поддерживают почти все популярные в сети:

  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
  • Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
  • Chrome Whatever+
  • IE 9+
  • Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")" ;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=".myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="myBackground.jpg", sizingMethod="scale")";

Но внимание!!! при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

Альтернативную версию представляет Doug Neiner. В этом случае используется встроенный в страницу элемент , который может изменять размер в любом браузере. Устанавливаем значение min-height, которое способствует заполнению окна браузера вертикально и ставим 100% для width, что заполняет страницу горизонтально. Также ставим min-width чтобы изображение никогда не было меньшим, чем оно есть на самом деле.

img.bg { /* Set rules to fill background */ min-height : 100% ; min-width : 1024px ; /* Set up proportionate scaling */ width : 100% ; height : auto ; /* Set up positioning */ position : fixed ; top : 0 ; left : 0 ; } @media screen and (max-width : 1024px ) { /* Specific to this particular image */ img.bg { left : 50% ; margin-left : -512px ; /* 50% */ } }

img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

  • IE 9 — работает;
  • IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
  • IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

Еще один вариант решения задачи с помощью CSS стилей это разместить встроенное изображение на странице с фиксированной позицией в левом верхнем углу, после чего задать для min-width и min-height значение 100% сохраняя пропорции.

#bg { position : fixed ; top : -50% ; left : -50% ; width : 200% ; height : 200% ; } #bg img { position : absolute ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; margin : auto ; min-width : 50% ; min-height : 50% ; }

#bg { position:fixed; top:-50%; left:-50%; width:200%; height:200%; } #bg img { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; min-width:50%; min-height:50%; }

Хак работает в:

  • Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
  • IE 8+
  • Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

#bg { position : fixed ; top : 0 ; left : 0 ; } .bgwidth { width : 100% ; } .bgheight { height : 100% ; }

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

< aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ((theWindow.width() / theWindow.height()) < aspectRatio) { $bg .removeClass() .addClass("bgheight"); } else { $bg .removeClass() .addClass("bgwidth"); } } theWindow.resize(function() { resizeBg(); }).trigger("resize"); });

По моему, центрирование в этом случае не производится (насколько я понял), но его можно сделать. Поддерживается большинство десктопных браузеров, в том числе IE7+. Напоследок автор статьи про хаки подготовил набор файлов примеров, в которых это все реализована — скачать можно . В комментариях к статье-оригиналу также содержится некоторая информация и обсуждение, хотя большинство важных деталей автор добавлял в виде апрейтов к посту и у меня он также переведены и указаны. Конечно, разобраться во всем этом помогут и примеры. В целом, если бы не постоянные «приколы» от IE7 все упомянутые хаки были бы идеальными.

P.S. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.