Если Вы много работаете за компьютером, то однообразный фоновый рисунок со временем может надоесть и появится желание заменить его на что-то более оригинальное. Кроме того, заменив фоновый рисунок, вы покажете другим сотрудникам, что вы, оказывается, разбираетесь в компьютере!
Нажав правую кнопку мыши (курсор должен быть на чистом рабочем столе, а не на каких-нибудь вкладках, ярлыках), вызываете контекстное меню.
В открывшемся меню выбираем Персонализация
Рис.2
Рис.3
В открывшемся окне вы можете выбрать фон из нескольких десятков рисунков, которые есть по умолчанию в операционной системе Windows 7. Для просмотра, кликаете по эскизам рисунков и они, на ваших глазах, появляются на экране монитора. Когда выберете рисунок - нажмите кнопку Сохранить изменения, чтобы понравившийся рисунок стал фоном рабочего стола.
Если поставить галочки на нескольких изображениях, тогда станет активным поле Сменять изображение каждые и из выпадающего списка вы можете выбрать интервал времени, через который изображения будут сменять друг друга.
Но, возможно вы хотите сделать фоном рабочего стола свой рисунок, или фотографию. Тогда нажимаете кнопку Обзор А и находите папку с вашими фотографиями. Только имейте ввиду, что, если фотография, или рисунок не соответствуют размерам экрана, тогда нужно нажать кнопку Заполнение Б и из выпадающего списка выбрать, что нужно сделать с рисунком: растянуть, разместить по центру и т.д.
Изменение фона рабочего стола в Windows XP
Нажав правую кнопку мыши на пустом экране, вызываете контекстное меню. В нем выбираете нижнюю строчку - Свойства.
В открывшемся окне Свойства: Экран нажимаем вкладку Рабочий стол :
Рис.4
Именно здесь вы можете установить цвет или фоновый рисунок экрана.
Если вы хотите, чтобы экран вашего монитора был одноцветным, тогда на вкладке Цвет 1 из выпадающего списка выбираете любой цвет, который вам нравится (черный, желтый, красный и т.д.). А в поле Фоновый рисунок 2 щелкаете по верхней строчке (нет) . При этом на экране монитора, который виден посередине вкладки, появится выбранный вами цвет. Если этот цвет вам нравится, тогда нажимаете кнопку применить, а потом ОК. Все - экран монитора окрасился в ваш любимый цвет.
Но красивее будет, если экран не одноцветный, а установлен фоновый рисунок. Рисунок можно выбрать из стандартного набора Windows. Для этого в поле Фоновый рисунок 2 щелкаете курсором по названиям рисунков и эти рисунки будут появляться на экране монитора-образца. В данный момент там виден стандартный рисунок Windows XP под названием Безмятежность. Выбрав какой-то рисунок, вы нажимаете кнопку Применить, а потом ОК и этот рисунок появится на вашем рабочем столе - на экране вашего монитора.
Но, через некоторое время вам надоедят все стандартные рисунки и появится желание найти что-нибудь новенькое.
Множество рисунков есть на CD - дисках и в Интернете. Можете подобрать себе несколько рисунков и потом менять их каждую неделю. Чтобы вывести на экран такой рисунок, нажимаете кнопку Обзор и с помощью проводника Windows находите файл с этим рисунком на вашем компьютере. Выбранный файл появится в списке Фоновый рисунок 2 Теперь нажимаете кнопку Применить, а потом ОК и ваш рисунок на экране.
Обращаю внимание только на то, что рисунок должен находиться на жестком диске, а не на CD. То есть, понравившийся рисунок нужно сначала скопировать с CD - диска, а потом уже устанавливать его фоновым рисунком.
Но, возможно, вам и этого покажется мало. Вы пожелаете сделать фоновым рисунком свои фотографии. Это тоже возможно.
Только желательно, чтобы рисунок соответствовал вашему экранному разрешению. Если разрешение экрана 1024 х 768, то и размер фотографии должен быть таким же. Потому что, если фотография больше экрана, то на экране разместится только часть фотографии и не обязательно лучшая.
Если размер фотографии будет меньше экрана, то тогда нужно будет в поле Расположение 4 выбирать вариант. Фотографию придется или разместить по центру или растянуть, или замостить ею экран, что, в любом случае, будет не очень красиво. Значит, фотографию нужно предварительно подготовить.
windows xp
Как сменить обои на рабочем столе, если вы скачали новые обои из Интернета, или принесли новые обои на диске, или желаете установить в качестве обоев любимое фото?
Измените параметр Рабочего стола - Фон :
- вызовите контекстное меню для объекта Рабочий стол , щелкнув правой кнопкой мыши на любом свободном месте Рабочего стола, но не на объектах стола, иначе будет вызвано контекстное меню, связанное с данными объектами;
- в раскрывшемся меню выберите команду Свойства. Перед вами появится окно (рис. 1);
- выберите вкладку Фон , щелкнув левой кнопкой мыши;
- просмотрите с помощью полосы прокрутки список графических файлов в окне Рисунок рабочего стола;
- щелчком мыши на значке графического файла выберите рисунок;
- выберите способ расположения рисунка на Рабочем столе щелчком на кнопке Расположить . В раскрывшемся списке команд выберите команду Растянуть , если вы хотите поместить рисунок на весь экран, команду По центру, чтобы расположить рисунок в центре экрана, или команду Рядом, чтобы размножить выбранный рисунок мозаикой по всему экрану.
- в окне предварительного просмотра посмотрите, как будет выглядеть Рабочий стол с выбранным вами рисунком;
- щелкните на кнопке Применить , чтобы увидеть результат изменений на экране (окно Свойства: Экран останется раскрытым).
Замечание: Через некоторое время вам надоедят все стандартные рисунки и появится желание найти что-нибудь новенькое.
Чтобы вывести на экран необходимые обои, нажимаете кнопку Обзор (Выбрать из каталога) 3
и с помощью проводника Windows находите файл с этим рисунком на вашем компьютере. Выбранный файл появится в списке Фоновый рисунок 2
Теперь нажимаете кнопку Применить
, а потом ОК
и ваш рисунок на экране.
Обращаю внимание только на то, что рисунок должен находиться на жестком диске, а не на CD. То есть, понравившийся рисунок нужно сначала скопировать с CD - диска, а потом уже устанавливать его фоновым рисунком.
Но, возможно, вам и этого покажется мало. Вы пожелаете сделать фоновым рисунком свои фотографии. Это тоже возможно.
Только желательно, чтобы рисунок соответствовал вашему экранному разрешению. Если разрешение экрана 1024 х 768, то и размер фотографии должен быть таким же. Потому что, если фотография больше экрана, то на экране разместится только часть фотографии и не обязательно лучшая.
Чтобы узнать какое разрешение экрана Вашего компьютера, зайдите во вкладку Параметры (Свойства: Экран – Параметры).
Теперь Вы в курсе какого разрешения Вам нужны обои, чтобы они смотрелись нормально, без каких-либо искажений.
Если размер фотографии будет меньше экрана, то тогда нужно будет в поле Расположение 4 выбирать вариант. Фотографию придется или разместить по центру или растянуть, или замостить ею экран, что, в любом случае, будет не очень красиво. Значит, фотографию нужно предварительно подготовить.
windows 7
1 вариант
- Пуск – Панель управления – Экран
- Слева панель управления настройками экрана – выбираем Изменение фонового рисунка рабочего стола
- С помощью кнопки Обзор найдем папку на компьютере, где Вы предварительно сохранили Обои рабочего стола
- Содержимое папки будет отображаться в окне, выбираем любую картинку и настраиваем отображение картинки с помощью кнопки Положение изображения – выбираем оптимальный вариант расположения.
- Фиксируем выбранные обои кнопкой Сохранить изменения.
2 вариант
Успешной Вам работы!
Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (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. Хотите купить книгу? — не обязательно ходить в магазине ведь сейчас онлайн книжный интернет магазин позволяет сделать все через сеть — выбрать, оплатить и оформить доставку на дом.
В каждом персональном компьютере имеется свое виртуальное рабочее место для пользователя. Оно так и называется – «Рабочий стол». На нем расположены главные программные папки и элементы быстрой навигации по системным службам. На рабочем столе компьютера, также, как и на письменном столе в офисе, можно прибираться – менять местами документы, настраивать время, устанавливать календарь, убирать мусор в корзину, и, конечно же, украшать свое рабочее место фото-обоями. Чтобы красивый пейзаж обоев был максимального размера, необходимо зайти в специальный раздел по тому, как сделать фоновой рисунок на весь экран.
