Вам понадобится
- Соединение с Интернетом, страница с картинкой, HTML-коды изображения.
Инструкция
1
Откройте нужную картинку. Внимательно изучите код страницы и картинки, в котором прописаны все ее размеры – высота, ширина.
2
Измените в коде, указывающем ширину картинки, имеющиеся цифры на проценты, например, замените width=«277» на width=«90%». Проценты в данном случае обозначают, насколько сильно будет растянута картинка после ее преобразования.
3
Выполните аналогичные действия с кодом, определяющим высоту картинки, например, установите, вместо цифр параметр height= «80%».
4
Сохраните все произведенные изменения.
Совет 2: Как растянуть фоновую картинку
Возможность растягивать фоновую картинку на всю ширину окна браузера средствами только языка CSS появилась с выходом его последней спецификации - CSS3. К сожалению, пока большое количество веб-серферов использует браузеры ранних версий, не понимающих спецификации CSS3. Поэтому приходится делать выбор - либо использовать менее удобное, но кроссбраузерное решение, либо высокотехнологичное, но для ограниченной аудитории. Рассмотрим оба варианта.
Вам понадобится
- Базовое знание языков HTML и CSS
Инструкция
1
Первый вариант основан на более ранних спецификациях языка CSS. Вам нужно создать такую структуру HTML-кода, в которой будут присутствовать два перекрывающихся слоя, размещенных один над другим. Слои (div) можно растягивать на ширину экрана и в старой спецификации языка описания каскадных стилей. В нижний из слоев вам нужно поместить фоновую картинку, а в верхнем будет размещаться весь контент страницы. Такая структура в теле документа может выглядеть так:<img id="background" src="fon.png" />
<div id="body">
Здесь будет содержимое страницы
</div>А в заголовочную часть надо поместить описание стилей для этой структуры. Например, такое:<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>Здесь слоям с идентификаторами background (это у вас фоновая картинка) и body (это слой для контента страницы) задано абсолютное позиционирование и 100% ширина и высота. Кроме того, слою контента задан порядковый номер z-index = 2. Он определяет «глубину» слоев - чем он больше, тем дальше от «дна» располагается этот лэйер. В нашем случае он будет выше слоя background, который использует значение z-index, заданное по умолчанию.
<div id="body">
Здесь будет содержимое страницы
</div>А в заголовочную часть надо поместить описание стилей для этой структуры. Например, такое:<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>Здесь слоям с идентификаторами background (это у вас фоновая картинка) и body (это слой для контента страницы) задано абсолютное позиционирование и 100% ширина и высота. Кроме того, слою контента задан порядковый номер z-index = 2. Он определяет «глубину» слоев - чем он больше, тем дальше от «дна» располагается этот лэйер. В нашем случае он будет выше слоя background, который использует значение z-index, заданное по умолчанию.
2
Весь код в сборе может выглядеть так:
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>
</head>
<body>
<img id="background" src="fon.png" />
<div id="body">
Здесь будет содержимое страницы
</div>
</body>
</html>Не забудьте заменить имя файла фонового изображения fon.png.
<html>
<head>
<style type="text/css">
html, body {
margin: 0px;
height: 100%;
}
#background {
position: absolute;
width: 100%;
height: 100%;
}
#body {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
}
</style>
</head>
<body>
<img id="background" src="fon.png" />
<div id="body">
Здесь будет содержимое страницы
</div>
</body>
</html>Не забудьте заменить имя файла фонового изображения fon.png.
3
Второй вариант будет использовать появившееся в CSS3 свойство background-size. Заодно добавьте в определения стилей аналогичные свойства и раньше использовавшиеся браузерами Mozilla Firefox, Google Chrome и Opera. Блок описания стилей в этом варианте может выглядеть так:<style type="text/css">
html {
background: url(fon.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>И здесь не забудьте заменить имя файла фонового изображения fon.png. А в самом теле документа никаких специальных конструкций помещать в этом варианте не требуется.
html {
background: url(fon.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>И здесь не забудьте заменить имя файла фонового изображения fon.png. А в самом теле документа никаких специальных конструкций помещать в этом варианте не требуется.
Источники:
- как растянуть рабочий стол
Совет 3: Как изменить фоновую картинку
Для многих и многих в наше время компьютер стал рабочим инструментом и развлекательным центром, источником информации и средством общения. Понятно, дизайн места, за которым человек проводит несколько часов в день, имеет очень большое значение. OS Windows предоставляет свои пользователям большой выбор настроек рабочего стола.
Вам понадобится
- OS Windows, изображения для фонового рисунка
Инструкция
1
Чтобы поменять фоновую картинку, если у вас установлена версия XP или Windows 2000, щелкните правой клавишей мыши на Рабочем столе. В контекстном меню выбирайте пункт «Свойства», затем вкладку «Рабочий стол». В разделе «Фоновый рисунок» из списка можете выбрать готовое изображение. Если подходящего рисунка не нашли, нажмите на кнопку «Обзор», чтобы начать поиск на жестком диске или в сети. Если рисунок по размерам меньше, чем экран, его можно либо растянуть, либо размножить и разместить на Рабочем столе несколько копий («Замостить»), либо поместить рисунок в центре и окружить цветным фоном. Примите во внимание, что при изменении размеров изображения может ухудшиться его качество. Нажав кнопку «Настройка рабочего стола», вы можете поменять вид стандартных значков.
2
Версия Windows Vista предлагает новый набор фоновых рисунков. Через кнопку «Пуск» зайдите в «Панель управления», выбирайте папку «Оформление и личная настройка», затем «Персонализация» и «Фоновый рисунок рабочего стола». Если в предложенном рисунке нет ничего подходящего, нажмите кнопку «Обзор» и ищите изображение из других источников. Во вкладке «Как разместить рисунок» выбирайте способ размещения: растянуть, поместить в центр экрана или замостить Рабочий стол. Вы можете сделать фоном Рабочего стола произвольное изображение, которое вам понравилось. Для этого щелкните по изображению правой клавишей, в контекстном меню выбирайте пункт «Сделать рисунком рабочего стола».
3
В 7-й версии Windows появилась возможность в качестве фонового рисунка установить слайд-шоу. Из меню «Пуск» зайдите в Панель управления, выбирайте «Оформление и персонализация», затем «Изменение фона рабочего стола». Просмотрите набор готовых рисунков, или при помощи кнопки «Обзор» найдите изображение из других источников и загрузите их в отдельную папку. Отметьте флажком в верхнем левом углу каждый рисунок, который хотите добавить в слайд-шоу. Из списка под набором предлагаемых фоновых рисунков установите параметры для слайд-шоу: «Положение изображения» на Рабочем столе – подогнать размер, поместить в центре или растянуть; «Сменять изображение каждые…» - задать частоту смены кадров при показе слайд-шоу; В случайном порядке - выбрать порядок смены кадров. Подтвердите выбор, нажав кнопку ОК. Чтобы добавить в слайд-шоу новое изображение, откройте его через «Обзор», установите флажок и подтвердите выбор, нажав кнопку «Сохранить изменения».
Видео по теме
Полезный совет
Всегда учитывайте, как будет выглядеть изображение в качестве фоновой картинки - будут ли заметны на ней иконки рабочего стола, не будет ли рисунок утомительным для глаз.
Видео по теме
Обратите внимание
Выбирайте процент растягивания в зависимости от специфического строения web-страницы, но при этом в обязательном порядке ориентируйтесь на таблицу, в которой находится изображение. Целесообразно сверить готовый результат на нескольких мониторах. Это позволит избежать неприятного искажения изображения.
Полезный совет
Данный метод растягивания изображения позволяет настроить картинку с учетом разрешения экрана конкретного монитора компьютера и структуры страницы того или иного сайта.
Источники:
- Советы о том, как изменить размер картинки.
