Html код фон страницы. Фоновая картинка. Фоновое изображение в HTML
Недавно столкнулся с интересной задачей: на странице нужно разместить пользовательскую форму, в которой было несколько полей для ввода данных и поле для выбора файла. Причем, кнопка выбора файла сделана именно как красивая кнопка, а не стандартный компонент input. А отправка этой формы, в соответствии с техническим заданием, должна выполняться сразу после выбора файла. В итоге должна получится подобная пользовательская форма:
Имя файла:
Загрузить файл
Здесь можно выделить две отдельные задачи. Первая – выполнить отправку формы сразу после выбора файла. Вторая – оформить компонент выбора файла в соответствии с дизайном в виде нестандартной кнопки.
Форма, для которой реализуем все описанные задачи, имеет следующий исходный код:
Имя файла:
и в начале выглядит так:
Имя файла:
Submit формы после выбора файла в inputПодобная задача рассматривалась в статье о перезагрузке и обновлении страницы выбором в select . Там так же использовалось событие компонента формы для отправки формы с помощью скрипта.
Выполнить отправку формы можно с помощью jQuery кода:
$("#ID_формы" ).submit();
Этот вызов нужно привязать к событию change (обновлению) компонента выбора файла input. В итоге код jQuery для решения нашей формы должен быть следующий:
jQuery(function(){
$("#myfile"
).change(function(){
// событие выбора файла
$("#myform"
).submit();
// отправка формы
});
});
Сложность этой задачи заключается в отсутствии стандартов оформления компонента. В различных браузерах он отображается его по-разному. А CSS стилей, определяющих его внешний вид не достаточно, чтобы оформить его.
Самый простой способ для решения этой задачи будет скрыть сам компонент, а вызов его выполнять по нажатию на другой элемент. При этом возникает вопрос только о том, как связать нажатие на "пользовательскую кнопку" с вызовом стандартного события выбора файла.
Одним из вариантов может быть снова применение jQuery. Но, на мой взгляд, если есть возможность обойтись без дополнительных скриптов, а использовать только теги HTML, то стоит делать без скриптов. И здесь нам на помощь приходит тег HTML label. В статье "Переключение radio кнопки и checkbox нажатием на подпись в HTML" уже описывалось его применение.
Здесь, подобным образом, тег компонента выбора файла обрамляется тегом label. В label так же добавим текст "Загрузить файл"
Имя файла:
Загрузить файл
Теперь остается только назначить стили для оформления имеющихся тегов. Компонент выбора файлов скрывается. Тегу label, придаем нужный внешний вид:
#myform p
{
text-align
: center;
margin
: 10px 0;
}
#myform #myfile
{
display
: none;
}
#myform #mylabel
{
background-color
: #fd685b;
padding
: 10px 20px;
color
: #fff;
cursor
: pointer;
}
В статье представлено несколько трюков, которые вы, возможно, не знали и которые вы найдёте полезными в своих разработках.
1. Изображение в качестве фона, которое пропадает при вводе текста.Вы можете добавить фоновое изображение также, как и в любой другой элемент. В этом случае стиль по умолчанию для textarea изменяется, а именно бордер толщиной в 1px изменяется на скошенную границу. Исправляется это явным указанием бордера.
Textarea { background: url(images/benice.png) center center no-repeat; border: 1px solid #888; }
Фоновое изображение может повлиять на читаемость текста. Поэтому фоновое изображение надо убирать при получении фокуса и возвращать его, если textarea осталась без текста. Например, используя jQuery это можно сделать таким образом:
$("textarea") .focus(function() { $(this).css("background", "none"); }) .blur(function() { if ($(this).value == "") { $(this).css("background", "url(images/benice.png) center center no-repeat"); } });
2. Placeholder в HTML5
В HTML5 появился новый атрибут, называемый placeholder . Значение этого атрибута показывается в текстовом элементе и исчезает при получении фокуса, а также в случае когда в элементе введён текст.
HTML5 placeholder поддерживается в следующих браузерах: Safari 5, Mobile Safari, Chrome 6, и Firefox 4 alpha.
3. Placeholder, HTML5 с поддержкой старых браузеров используя jQueryСамый простой способ проверить поддерживается ли атрибут браузером это проверить с помощью javaScript:
Function elementSupportsAttribute(element, attribute) { var test = document.createElement(element); return (attribute in test); };
Затем можно написать код, который будет срабатывать если браузер не поддерживает атрибут placeholder .
If (!elementSupportsAttribute("textarea", "placeholder")) { // Если браузер не поддерживает атрибут, то выполняется код jQuery $("#example-three") .data("originalText", $("#example-three").text()) .css("color", "#999") .focus(function() { var $el = $(this); if (this.value == $el.data("originalText")) { this.value = ""; } }) .blur(function() { if (this.value == "") { this.value = $(this).data("originalText"); } }); } else { // Если же браузер поддерживает HTML5, то просто используем эту возможность $("#example-three") .attr("placeholder", $("#example-three").text()) .text(""); }
4. Удаляем обводку textarea
Браузеры на движках webkit, а также в FireFox 3.6, обводят textarea , когда он находится в фокусе. Удалить эту обводку можно используя css-свойство outline для webkit-браузеров. Для FireFox используется свойство -moz-appearance , либо можно просто установить элементу бордер или фон.
Textarea { outline: none; -moz-appearance: none; border: 1px solid #999; /* указание этого свойства также удалит обводку в FireFox */ }
5. Запрет изменения размера
Webkit-браузеры добавляют к textarea визуальный элемент в правом нижнем углу, который позволяет изменять размер текстовой области. Если вы хотите убрать эту возможность, то вам необходимо использовать следующее css-свойство:
Textarea { resize: none; }
6. Добавление возможности изменения размераjQuery UI позволяет добавить возможность изменения размера для textarea. Это работает для всех браузеров, а для webkit-браузеров подменяет стандартное поведение. Для того, чтобы использовать эту возможность, необходимо подключить jquery.ui и написать следующий код:
$("textarea").resizable();
7. Изменение размера под содержимое
James Padolsey написал удобный jQuery-скрипт который позволяет автоматически изменять размер textarea под его содержимое. Похоже что этого плагина больше нет, но можно использовать например вот этот . Плагин содержит много настроек, но самый простой способ его использовать это:
$("textarea").autoResize();
8. NowrapЧтобы не переносить слова на новые строки, для всех элементов используется css-свойство white-space , которое не работает с textarea . Для textarea необходимо использовать атрибут wrap .
9. Удаляем скролл-бары в IE
IE показывает вертикальный скролл-бар для всех textarea . Вы можете их спрятать используя overflow: hidden , но в таком случае он не будет показываться при увеличении контента. Поэтому правильнее использовать следующий подход:
Textarea { overflow: auto; }
В этом случае скролл-бар не будет отображаться когда в textarea помещается весь текст, но выведется в случае необходимости.
Примеры к статье вы можете посмотреть .
Изображения и фоновые рисунки позволяют легко изменить вид текстовых полей и кнопок для отправки формы на сервер. Как обычно, вначале требуется нарисовать желаемые элементы в графическом редакторе (рис. 1), а затем сделать отдельные изображения для каждого поля.
Рис. 1. Форма с нестандартными элементами
Начнём с однострочного текстового поля. Размеры картинки получились 328х46 пикселов, эти значения укажем в качестве ширины и высоты. Саму картинку ставим фоном с помощью свойства background . Изначально у текстового поля отображается рамка, чтобы она не портила вид её необходимо спрятать, задав свойство border со значением none (пример 1).
Пример 1. Текстовое поле
Текстовое поле .user { width: 308px; /* Ширина поля с учетом padding */ height: 46px; /* Высота */ background: #dad7c5 url(images/input.png) no-repeat; /* Фон */ padding: 0 10px; /* Поля */ border: none; /* Убираем рамку */ font-size: 1em; /* Размер текста */ line-height: 46px; /* Выравниваем по центру в IE */ }
Наше поле по высоте получается довольно большим по сравнению с полем по умолчанию, из-за этого возникают проблемы с выравниванием текста по центру в IE. Он будет выводиться по верхнему краю поля, что выглядит довольно небрежно. Для выравнивания используем свойство line-height со значением равным высоте поля заданным через height . На остальные браузеры это дополнение не окажет влияния, поэтому условными комментариями можно пренебречь.
Для многострочного текстового поля установка фона происходит аналогично. Но есть небольшое отличие - с правой стороны имеются кляксы, если мы вставим картинку фоном для , то при появлении вертикальной полосы прокрутки она будет выводиться прямо по кляксам. При этом теряется эффект рамки. Поэтому фон добавим для блочного элемента, а выведем уже в нём (пример 2).
Сюда же вставим и рисованную кнопку для отправки файла. Это делается через , в атрибуте src указываем путь к файлу, остальное браузер берет на себя.
Пример 2. Поле для ввода текста
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Текстовое поле .comment { width: 347px; /* Ширина рисунка */ height: 176px; /* Высота рисунка */ background: #dad7c5 url(images/textarea.png) no-repeat; /* Фон */ } .comment textarea { border: none; /* Убираем рамку */ background: transparent; /* Прозрачный фон */ margin: 3px; /* Отступы от линии */ width: 318px; /* Ширина поля */ padding: 5px 0 5px 5px; /* Поля в тексте */ height: 160px; /* Высота */ }
По умолчанию текстовое поле имеет белый цвет фона, что нам совершенно не требуется, поэтому в свойствах задаём его прозрачным через значение transparent .
Браузеры несколько по-разному выводят полосу прокрутки, но эти изменения не настолько существенны, чтобы придавать им значение. К примеру, вид формы в Opera показан на рис. 2.
Рис. 2. Поле для ввода текста
В браузерах примеры отображаются корректно, только следует учесть два момента.
Уже немало копий front-end разработчиков было сломано об проблему стилизации поля ввода input . Суть проблемы заключается в том, что в спецификации HTML нет строгих правил, устанавливающих, как же должен отображаться браузером этот элемент. Более того, для input не предусмотрено атрибутов, которые позволили бы изменить его внешний вид, с помощью стилей CSS можно изменить лишь вид его границы и шрифт, а средствами JavaScript, из соображений безопасности, нельзя сымитировать клик по этому элементу, который вызвал бы системное окно для выбора файла * . Но что же делать, когда заказчик хочет адаптивный сайт с красивыми стилизованными формами, в которых нельзя обойтись без этого поля ввода?
* - на момент написания этой статьи, мне было еще неизвестно, что уже во всех современных браузерах имитация клика по input вызывает системное окно выбора файла. Большое спасибо lutov за ценный комментарий с ссылкой на рабочий пример от Pagefest !
Способы решения проблемы стилизации поля За то время, сколько существует эта проблема (а существует она очень долго), было найдено несколько способов ее решения. Всего их существует пять:Способ №1 (самый распространенный)Убедить заказчика, что можно жить и со стандартным input .Способ №2Написать/использовать готовый загрузчик файлов на Flash/Java-апплете. Используется, например, на habrastorage.org Способ №3 (будет рассмотрен в статье)Средствами CSS «замаскировать» стандартный input , сделать его полностью прозрачным и поместить на месте стилизованного фейкового поля, чтобы клик по последнему вызывал клик по стандартному, и, как следствие, открывал системное окно выбора файла.Способ №4 new! (будет рассмотрен в статье) Поместить прозрачный input внутрь элемента label, вместе с произвольными стилизованными инлайновыми элементами (кроме input, button, select и textarea, разумеется). Клик по label автоматически приведет к клику и по скрытому полю для выбора файла. Спасибо lampa за ценный комментарий !Способ №5 new! (будет рассмотрен в статье)Использовать имитацию клика по скрытому input средствами JavaScript. Да, это уже работает во всех современных браузерах. Еще раз спасибо lutov за ценный комментарий !UPD: Внимание , данный способ неприменим для браузера Internet Explorer! Несмотря на то, что файл выбирается в скрытом input , при отправке формы значение последнего будет «сброшено». Спасибо LeonidFrolov за ценный комментарий !
У всех четырех последних способов, разумеется, есть свои минусы. Существенный недостаток Flash/Java-решения в том, что для его работы нужны соответствующие плагины, которых в браузере пользователя может не оказаться. Большой недостаток «маскировочного» решения же заключается в том, что для его реализации необходимо использовать хаки (про это речь пойдет ниже), а также потому, что оно бессмысленно без использования JavaScript (ведь нужно же как-то различать состояния «файл не выбран» и «файл выбран» для стилизованного фейкового поля, что на одном CSS сделать невозможно). Решение на JavaScript, в целом, было бы очень хорошим, но, как оказалось на практике, оно не поддерживается браузером Internet Explorer, о чем было сказано выше. Минус решения с использованием label - все то же использование JavaScript, однако, оно гораздо лучше «маскировочного» способа и должно, на мой взгляд, использоваться сейчас для решения этой острой проблемы.
Схема велосипеда Ключевой задачей было поставлено создание «резинового» input , который на экранах мобильных устройств представлял бы из себя простую кнопку для выбора файла (имя выбранного файла выводится на ней же), а на широких экранах выглядел бы как привычное для всех текстовое поле + кнопка, которое может тянуться на всю ширину окна:Схематический вид элемента на мобильных устройствах
Схематический вид элемента на десктопных устройствах
В статье будут рассмотрены три последних способа стилизации поля выбора файла. Таким образом, с учетом оговоренной выше схемы, исходная верстка для «маскировочного» способа №3 будет иметь следующий вид (порядок дочерних элементов важен!):
Выбрать Файл не выбран
Возможная верстка для способа с применением элемента label:
Выбрать
Файл не выбран
Возможная верстка для решения на JavaScript (совпадает с версткой для «маскировочного» способа):
Выбрать
Файл не выбран
/* example */
Договорились? Отлично! Начнем стилизовать наше фейковое поле выбора файла с его «обертки» - div.file_upload :
File_upload{
position: relative;
overflow: hidden;
font-size: 1em; /* example */
height: 2em; /* example */
line-height: 2em /* the same as height */
}
- свойство position задается для того, чтобы относительно div.file_upload
можно было абсолютно позиционировать его дочерние элементы, а свойство overflow - для того, чтобы скрывать все то, что по каким-то причинам не влезет в нашу обертку (а такое найдется, но об этом позже). На широких экранах наши красивые поле и кнопка должны отображаться в одну строку - зададим для последней фиксированную ширину и float: right, а для первого - небольшой внутренний отступ:
File_upload > button{
float: right;
width: 8em; /* example */
height: 100%
}
.file_upload > div{
padding-left: 1em /* example */
}
Поскольку мы хотим, чтобы на мобильных устройствах текстовое поле скрывалось, и оставалась одна кнопка выбора файла, необходимо задать media query
:
@media only screen and (max-width: 500px){ /* example */
.file_upload > div{
display: none
}
.file_upload > button{
width: 100%
}
}
Ну а теперь - самое веселое в данном методе! Необходимо сделать стандартный input
полностью прозрачным, и растаращить растянуть его до размеров «обертки» div.file_upload
. Для реализации последнего применим хак в виде абсолютного позиционирования и свойства CSS 3 transform , с помощью которого увеличим элемент, например, в 20 раз (да, это самое обычное «магическое число»):
.file_upload input{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(20);
letter-spacing: 10em; /* IE 9 fix */
-ms-transform: scale(20); /* IE 9 fix */
opacity: 0;
cursor: pointer
}
Как видно из приведенного выше фрагмента CSS, для IE 9 потребовались дополнительные костыли. Это связано с тем, что данный браузер при клике на текстовое поле не вызывает системное окно выбора файла, а любезно предлагает «стереть» имя уже выбранного, что символизируется мигающим текстовым курсором. Поэтому для него дополнительно задается огромный интервал между буквами, что увеличивает кнопку элемента до размеров div.file_upload
. Отмечу также, что z-index в данном случае не указывается, т.к. элемент идет последним «потомком» в выбранной с самого начала разметке.
На примере десктопного браузера FireFox, сейчас наше кастомизированное поле выбора файла для разных размеров окна выглядит так:
File_upload{
display: block;
position: relative;
overflow: hidden;
font-size: 1em; /* example */
height: 2em; /* example */
line-height: 2em /* the same as height */
}
.file_upload .button, .file_upload > mark{
display: block;
cursor: pointer /* example */
}
.file_upload .button{
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 8em; /* example */
height: 100%;
text-align: center /* example */
}
.file_upload > mark{
background: transparent; /* example */
padding-left: 1em /* example */
}
Однако, теперь уже нет необходимости использовать хак с «растягиванием» прозрачного input
:
File_upload input{ position: absolute; top: 0; opacity: 0 }
«Как это работает?» или стили для решения на JavaScript Поскольку исходная верстка для данного способа была выбрана такой же, как и в «маскировочном», стили для кнопки и текстового поля для обоих способов также совпадают (за исключением, разве что, свойства cursor: pointer , которое, в данном случае, будет применяться к кнопке и текстовому полю). Стиль же input можно взять тот же, что использовался в методе c применением элемента label, но в нем лучше вместо свойства opacity использовать visibility:File_upload input{ position: absolute; top: 0; visibility: hidden }
Нужно больше стилей! Разумеется, в таком примитивном виде поле выбора файла вряд ли кого-то устроит, поэтому добавим дополнительные стили, которые сделают кнопку выбора файла, скажем, фиолетовой, добавят тени и т.д. Не забудем также добавить свой стиль для кнопки, когда на нее наведен курсор, стиль для нажатой кнопки, а еще добавим стиль для всего элемента, когда на нем находится фокус (будет применяться при помощи JavaScript):/* Making it beautiful */ .file_upload{ border: 1px solid #ccc; border-radius: 3px; box-shadow: 0 0 5px rgba(0,0,0,0.1); transition: box-shadow 0.1s linear } .file_upload.focus{ box-shadow: 0 0 5px rgba(0,30,255,0.4) } .file_upload > button{ background: #7300df; transition: background 0.2s; border: 1px solid rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25); border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05); color: #fff; text-shadow: #6200bd 0 -1px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .file_upload:hover > button{ background: #6200bd; text-shadow: #5d00b3 0 -1px 0 } .file_upload:active > button{ background: #5d00b3; box-shadow: 0 0 3px rgba(0,0,0,0.3) inset }
Теперь наше поле выбора файла выглядит так:
Var wrapper = $(".file_upload"),
inp = wrapper.find("input"),
btn = wrapper.find("button"),
lbl = wrapper.find("div");
btn.focus(function(){
inp.focus()
});
// Crutches for the:focus style:
inp.focus(function(){
wrapper.addClass("focus");
}).blur(function(){
wrapper.removeClass("focus");
});
Для метода с использованием label можно убрать участок кода, отвечающий за принудительный перенос фокуса с кнопки на input
(т.к. там у нас и не кнопка вовсе, а span).
Для метода, суть которого заключается в имитации клика по input , нужно, собственно, добавить эту самую имитацию:
// Yep, it works!
btn.add(lbl).click(function(){
inp.click();
});
а также скорректировать код для установки класса .focus
, предварительно убрав фрагмент, отвечающий за принудительный перенос фокуса:
// Crutches for the:focus style:
btn.focus(function(){
wrapper.addClass("focus");
}).blur(function(){
wrapper.removeClass("focus");
});
Поле ввода до сих пор оставалось «мертвым» - при выборе файла имя последнего нигде не отображалось. Пришло время исправить и это:
Var file_api = (window.File && window.FileReader && window.FileList && window.Blob) ? true: false;
inp.change(function(){
var file_name;
if(file_api && inp[ 0 ].files[ 0 ])
file_name = inp[ 0 ].files[ 0 ].name;
else
file_name = inp.val().replace("C:\\fakepath\\", "");
if(! file_name.length)
return;
if(lbl.is(":visible")){
lbl.text(file_name);
btn.text("Выбрать");
}else
btn.text(file_name);
}).change();
- если браузер поддерживает File API, то имя файла определяется с помощью него, в противном случае оно вырезается из значения скрытого input
. Для мобильных устройств, когда элемент представляет из себя одну кнопку, имя выбранного файла выводится на ней же.
Казалось бы, все, что требуется, уже написано. А вот фигушки! Если выбрать файл, используя «мобильное» поле, а затем увеличить размер окна и перевести элемент в «десктопный», то в текстовом поле так и останется «Файл не выбран» - нужно каждый раз обновлять элемент при изменении размеров окна:
$(window).resize(function(){
$(".file_upload input").triggerHandler("change");
});
- FireFox 22.0 (Linux, Windows)
- Opera 12.16 (Linux, Windows)
- Internet Explorer 9
- Chromium 27.0 (Linux)
- Apple Safari (iOS 6.3.1)
- Android browser (Android 2.3.6)
- Android FireFox
Из плюсов всех рассмотренных в статье подходов можно выделить следующие основные:
- Не используется Flash.
- Элемент можно легко стилизовать средствами CSS, используя современные технологии адаптивного дизайна.
- Поле можно заполнять и с клавиатуры.
Из основных минусов:
- Необходимость использования JavaScript (касается всех способов).
- Использование хаков CSS для «маскировочного» способа.
- Необходимость писать дополнительные костыли для поля с атрибутом multiple (касается всех способов).
- Некроссбраузерность - у всех способов отсутствует поддержка IE 8, а также необходимо использовать «браузерные» свойства CSS для поддержки остальных «старичков».
- Решение на JavaScript не поддерживается всеми версиями Internet Explorer, а также некоторыми старыми версиями других популярных браузеров (хотя ими уже практически никто и не пользуется).
Какой из трех двух элегантных способов создания стилизованного input выбрать для повседневного использования - решать вам. Мой выбор - способ с использованием label (хоть он и имеет несемантичную верстку).
Рабочие примеры всех трех способов можно посмотреть на CodePen.
Влад Мержевич
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым. Далее рассмотрены некоторые аспекты применения фоновых изображений.
Фон на веб-страницеУстановка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега . Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.
В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background , его и будем использовать в дальнейшем.
Добавление фонового рисункаДобавление рисунка происходит путем установки адреса картинки через ключевое слово url . Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.
Чтобы установить картинку на веб-страницу, следует добавить стилевое свойство background к селектору BODY , как показано в примере 1.
Пример 1. Фоновый рисунок
Фоновое изображение BODY { background: url(images/target.gif) no-repeat 30px 20px; /* Параметры фона */ }
В данном примере графический рисунок target.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Повторение рисункаБлагодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.
Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью свойства background и его значения repeat-y .
Пример 2. Повторение фона по вертикали
Фоновое изображение BODY { background: #fc0 url(images/hand.png) repeat-y; /* Повторение по вертикали */ }
Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).
Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).
В примере 3 показан код HTML для создания градиентного фона.
Пример 3. Повторение фона по горизонтали
Фоновое изображение BODY { background: url(images/gradient2.png) repeat-x; /* Параметры фона */ text-align: center; /* Выравнивание блока по центру */ } DIV { margin: auto; /* Отступы вокруг блока */ width: 75%; /* Ширина блока */ height: 90%; /* Высота блока */ text-align: left; /* Выравнивание текста по левому краю */ padding: 10px; /* Поля вокруг текста */ background: white; /* Цвет фона */ } Lorem ipsum...
Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.
Добавление рисунка к текстуС помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальное свойство background , которое применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).
Пример 4. Добавление рисунка
Фоновое изображение H2 { background: url(images/book.gif) no-repeat 0 50%; /* Параметры фона */ padding-left: 20px; /* Отступ слева от текста */ } Заголовок
Основной текст
Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Сдвиг фона позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить свойство padding-left , за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка плюс желаемому отступу между изображением и текстом.
