- Время для практического занятия
- Как задать цвет и изображение фона сайта
- Положение фонового изображения, background-position
- Фиксим фонового изображения, background-attachment
- Изменение вида и цвета текста
- Background-repeat
- Установка однотонного заднего фона с помощью html
- Как сделать фон на сайте html
- Повторение фоновых картинок background-repeat
- background-position – положение фонового изображения
- Полезные советы:
- Положение фона
- CSS
- background-image – фоновое изображение или градиент
- Позиционирование фоновых изображений background-position
- Background как свойство в каскадных стилевых таблицах
- Background-position
- Как добавить два фона к одному элементу через CSS3?
- Решение
- Альтернативный текст
- Изображение в качестве ссылки
- Создание полупрозрачного фона в CSS
- Вставка нескольких фонов.
- Атрибут background | htmlbook.ru
- Описание
- background-repeat
- Обобщённое свойство для установки фона
Время для практического занятия
Разобрав главные элементы управления задним фоном, а также их атрибуты, приступим непосредственно к разбору конкретного примера. В коде программы, представленной ниже, я попытался включить все описанные элементы.
Итак, перед нами стоит задача установить задний фон из двух картинок: анимации и обычного изображения. При этом gif-анимация будет фиксирована, а рисунок прокручиваться вместе с содержимым страницы.
Также мы используем блоки больших размеров для того, чтобы отследить разницу между параметрами fixed и scroll. Обязательно попробуйте запустить пример самостоятельно и посмотреть, что выйдет!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style>
body {
background-image: url(https://gif1.mycdn.me/image?t=44&bid=835038013128&id=834515819819&plc=WEB&tkn=*UK1YYT8umKYaI0aL9yv8Q4ep3lo), url(https://picsfab.com/download/image/106992/6408x4272_goluboj-fon-s-belyimi-otbleskami-i-siyaniyami.jpg);
background-attachment: fixed, scroll;
background-repeat: repeat-y, repeat-y;
background-position: left, right;
}
div {
width: 500px;
height: 1500px;
background: white;
margin-left: 600px;
border: solid 1px blue;
}
</style>
</head>
<body>
<div>
<h1>Первый текст</h1>
</div>
<div>
<h1>Второй текст</h1>
</div>
</body>
</html>
|
На этой ноте можно подытожить нашу работу. Вступайте в ряды моих верных подписчиков, задавайте вопросы, если что-то непонятно, и не жадничайте ссылкой на мой блог, а делитесь ею с друзьями. Желаю приятного обучения. Пока-пока!
Прочитано: 7753 раз
Как задать цвет и изображение фона сайта
Для задания цвета фона используют свойство background-color, оно принимает значения в шестнадцатеричном формате цвета, в формате RGB, задание цвета при помощи ключевых слов.
Чтобы использовать в качестве фона сайта изображения, применяют свойство background-image, где указывают ссылку на файл. Можно использовать одновременно и вариант с цветом фона, и с изображением. Тогда изображение накладывается поверх фона определенного цвета.
Теперь поговорим о том, как регулировать повторение фонового изображения, как растянуть его на весь экран и т.д. Свойство, которое отвечает за повтор фона, называется background-repeat. Оно принимает четыре значения. В качестве значения по умолчанию принимается repeat (повторять по вертикали и горизонтали). Три других значения:
- repeat-x — повторяет изображение по горизонтали
- repeat-y — повторяет изображение по вертикали
- no-repeat — не повторяет изображение совсем
Для задания размера фонового изображения сайта используют свойство background-size, оно принимает значения в процентах, пикселях и слово auto. Имеет два значения через пробел. Первое значение отвечает за растяжение по горизонтали, второе по вертикали. Если первое значение задано (например, 100%), а второе значение выставлено auto, то фон по горизонтали растянется на весь размер блока, а по вертикали подгоняет высоту для данной ширины. Есть еще два значения для этого свойства (cover и contain). Cover изменяет размеры изображения так, чтобы блок был полностью закрыт картинкой, а contain так, чтобы картинка поместилась в блок целиком. Cover и contain задаются по одному, через пробел уже ничего писать не нужно.
Пример. Зададим цвет фона, его изображение без повтора и растянем его по ширине и высоте:
Положение фонового изображения, background-position
Немного подробнее остановимся на работе с фоновым изображением, которое не нужно повторять. Для регулирования нахождения этого изображения внутри блока, которому мы задаем фон, используется CSS-свойство background-position. Это свойство принимает два значения через пробел. Первое определяет положение по оси x (горизонтали), второе по оси y (вертикали).
Единицы измерения этих двух величин проценты и пиксели. Еще они принимают значения top, bottom, left, right, center. Значения для оси x, естественно, left, right, center. Значения для оси y — top, bottom, center. Единицы измерения, значения, пиксели и проценты можно комбинировать между собой в произвольном формате. В примере ниже зададим позиции для фонового изображения. В первом случае будет изображение по центру в процентах. Во втором случае изображение в правом нижнем углу блока. В третьем случает изображение сдвинуто на 50 пикселей слева и на 100 пикселей сверху. Пример:
Фиксим фонового изображения, background-attachment
Иногда для создания визуальных эффектов нужно, чтобы фон при прокрутки не уезжал вместе с просмотренной частью страницы, а оставался на месте. Это будет создавать интересный эффект параллакса.
Для фиксации фона используется css-свойство background-attachement. Оно принимает два значения, scroll — значение по умолчанию, прокрутка вместе со всем остальным содержимым, fixed — фон остается на месте при прокрутке.
Изменение вида и цвета текста
Используя дополнительные теги, можно улучшить дизайн странички за счет подчеркиваний, выделения фрагментов жирным или курсивом, изменения параметров шрифта, создания верхних/нижних индексов и т.д. Приведем наиболее популярные теги:
<strong> </strong> — такие метаданные применяют, чтобы выделить текст или его часть жирным шрифтом. Можно использовать и тег (<b> </b>).
<em> </em> — таким способом можно сделать выделение курсивом.
<u> </u> — в этом случае получим подчеркивание выделенного фрагмента.
<s> </s> — тег для перечеркивания текста.
<SUP> </SUP> — устанавливает верхний индекс (х2)
<SUB> </SUB> — таким образом создается нижний регистр (Н2О)
<hr> — применяем, если нужно сделать вставку в виде горизонтальной линии.
<font> </font> — такие метаданные меняют цвет, размер текста и стиль шрифта.
<html>
<head>
<title>для изменения цвета устанавливаем атрибут text</title>
<meta http-equiv=»content-type» content=»text/html; charset=utf-8″>
</head>
<body text=»green»>
Потом идет текстовый блок страницы, таблицы, картинки и т.д.
</body>
</html>
После таких изменений текст получится зеленым.
Популярные статьи
Высокооплачиваемые профессии сегодня и в ближайшем будущем
Дополнительный заработок в Интернете: варианты для новичков и специалистов
Востребованные удаленные профессии: зарабатывайте, не выходя из дома
Разработчик игр: чем занимается, сколько зарабатывает и где учится
Как выбрать профессию по душе: детальное руководство + ценные советы
Рассмотрим также решение, позволяющее одновременно задать цвет фона и текстовых блоков сайта или страницы. Чтобы решить задачу, как сделать фон HTML светло-зеленым:
<html>
<head>
<title>HTML фон</title>
</head>
<body style=»color:Yellow; background-color:#66cc66″>
<h1>Заголовок первого уровня</h1>
<p>1-й параграф</p>
<p>2-й параграф</p>
<p style=»color:#ffffff»>3-й параграф</p>
</body>
</html>
В строке style=»color:Yellow; background-color:#66cc66″ теге <body> меняет фоновый цвет HTML страницы на зеленый, а текст получится желтым.
Изменение вида и цвета текста
При необходимости, есть возможность выделять цветами отдельные параграфы. Сделать это можно так:
<p style=»background-color:#ff9900″ align=»center»>Первый параграф</p>
<p style=»background-color:#417ed0″ align=»center»>Второй параграф</p>
Вы узнали, как сделать фон в HTML и выделить фрагменты текста. Это совсем несложно, стоит только разобраться в некоторых тонкостях.
Background-repeat
Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:
- background-repeat: repeat-x — изображение повторяется только по горизонтали
- background-repeat: repeat-y — изображение повторяется только по вертикали
- background-repeat: repeat — изображение повторяется по горизонтали и вертикали
- background-repeat: no-repeat — изображение не повторяется
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
- background-attachment: scroll — прокручивается вместе со страницей
- background-attachment: fixed — при прокрутке фон остается неподвижным
Установка однотонного заднего фона с помощью html
Если существующий дизайн страниц сайта вам надоел и хочется сделать его обновление, стоит разобраться, как сделать новый фон для сайта HTML. Полностью менять дизайн без посторонней помощи – рискованная задача. Для этого нужны специальные знания и навыки.
Прежде всего, раскроем особенности изменения фона страниц в HTML. Чтобы установить цветовой оттенок, применяют свойство background-color в стилевом атрибуте style. Таким образом, задать фоновый цвет сайта можно прописав его характеристики в тег <body>. К примеру:
<body style=»background-color: #55D52B»>
<p>Фон сайта #55D52B</p>
</body>
Помимо 16-теричного кода оттенка можно задать цвет фона в виде ключевого слова или RGB. Пример:
<body style=»background-color: rgb(51,255,153)»>
<p>Фон сайта rgb(23,113,44)</p>
</body>
Отметим, что в сравнении с двумя другими вариантами, при установке цвета фона в формате ключевого слова есть несколько ограничений. В html для того, чтобы задать цвет могут применяться только шестнадцать ключей. К примеру, white, red, blue, black, yellow и др. В связи с имеющимися ограничениями мы рекомендуем для установки HTML фона сайта применять16-теричного кода или RGB.
Вы сумеете не только установить цвет фона, но и сделать еще ряд настроек.
Как сделать фон на сайте html
Разработка дизайна сайта должна начинаться с определения общего цветового фона. Ведь фон это редко меняемая часть сайта, которая будет видна всегда. Очевидно, что такая важная деталь должна быть в гармонии с цветовой палитрой всего сайта.
При создании фона для сайта самое главное определиться с вопросом о том, будет ли сайт растягиваться на весь экран (резиновый дизайн) или будет фиксированной ширины. Конечно, лучше сделать так, чтобы дизайн сайта и в далеком будущем на больших разрешениях мониторов отображался также красиво, но с другой стороны, чтобы при этом сайт не был сильно растянут.
Лично я всегда выбираю такие шаблоны для сайта, чтобы ширина видимой части контента была не больше 1024 символов. Если посмотреть статистику сайта, то такое разрешение удовлетворяет большой процент пользователей. В будущем это число будет уменьшаться, т.к. новые мониторы с высоким разрешением вытесняют старые (например, full-hd есть почти у каждого).
В качестве фона можно использовать либо монотонный цвет, либо фоновое изображение. У каждого способа есть свои плюсы и минусы. Монотонный цвет не будет нагружать сайт загрузкой лишнего изображения, но и дизайн сайта не будет столь эффектным, как это можно было бы сделать с применением фонового изображения.
Рассмотрим все варианты по заданию фона на сайте.
Повторение фоновых картинок background-repeat
Свойство предназначено для управления повторением фоновой картинки. Является не наследуемым.
| background-repeat | |
|---|---|
| Значения: | |
| При таком параметре фон повторяется многократно во все направлениях. При заданном правиле , повторение фонового имиджа осуществляется с учетом позиции. Является дефолтным | |
| Без повторения. | |
| Повторение слева направо вдоль воображаемой горизонтальной оси координат. | |
| Повторение сверху вниз право вдоль воображаемой вертикальной оси координат. | |
| Переводит в дефолтное состояние. | |
| При выборе этой опции, данное правило будет унаследовано от родителя. |
Формат записи
background-position – положение фонового изображения
Свойство задаёт позицию фонового изображения (или градиента). Значение по умолчанию: (помещает изображение в верхний левый угол).
Первое значение определяет смещение по горизонтали, а второе — по вертикали.
Указывать значения можно посредством:
- пикселей (например, );
- процентов ();
- с помощью ключевых слов: , , , и ().
В современных браузерах в можно указывать до 4 значений.
Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение .
Задавать можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме ) и величина смещения ( или ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью или .
При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.
Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.
Пример использования в 4 значений:
Это свойство поместит изображение слева на 45px и снизу на 10px.
Полезные советы:
Работая одновременно с несколькими фонами CSS код можно формировать с помощью базового свойства background выглядеть это будет так:
body{background: url(«graphics/mammoth.gif») no-repeat center 100px, url(«graphics/fon1.gif») repeat-x 0px 250px, url(«graphics/fon.gif») repeat;}
— такая запись являться аналогом той, которую мы с Вами разобрали в примере выше:
body {background-image:url(graphics/mammoth.gif), url(graphics/fon1.gif), url(graphics/fon.gif);background-repeat: no-repeat, repeat-x, repeat;background-position: center 100px, 0px 250px;}
По-моему в первом случае CSS код выглядит более «элегантным» и понятным.
Положение фона
Для управления положением фонового рисунка на странице применяется стилевое свойство background-position, оно одновременно устанавливает координаты изображения по горизонтали и вертикали. Чтобы отменить повторение фоновой картинки используется значение no-repeat. Также можно воспользоваться универсальным background, как показано в примере 4.
Пример 4. Положение фона
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Положение фонового рисунка</title>
<style>
body {
background: url(/example/image/tomato.jpg) right bottom no-repeat fixed; /* Параметры фона */
margin-right: 200px; /* Отступ справа */
}
</style>
</head>
<body>
<h1>Консервы из помидор</h1>
<p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды — 35 г
поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
ставят на прогревание, выдерживая в кипящей воде: литровые — 5-8,
трехлитровые — 12-15 мин. Затем их укупоривают и охлаждают.</p>
<p>Примерный расход сырья и продуктов на литровую банку: помидоров
красных отборных — 550-600 г, соли — 15 г, лимонной кислоты — 3 г.</p>
</body>
</html>
Результат данного примера показан на рис. 5. Изображение позиционируется в нужном месте с помощью значений right bottom свойства background. Чтобы текст не отображался поверх рисунка, справа на странице добавлен отступ через margin-right.
Рис. 5. Фоновая картинка в правом нижнем углу окна
Точное положение фона задаётся с помощью пикселей, но в основном применяется процентная запись или ключевые слова, как показано ниже:
- top left = left top = 0% 0% (в левом верхнем углу);
- top = top center = center top = 50% 0% (по центру вверху);
- right top = top right = 100% 0% (в правом верхнем углу);
- left = left center = center left = 0% 50% (по левому краю и по центру);
- center = center center = 50% 50% (по центру);
- right = right center = center right = 100% 50% (по правому краю и по центру);
- bottom left = left bottom = 0% 100% (в левом нижнем углу);
- bottom = bottom center = center bottom = 50% 100% (по центру внизу);
- bottom right = right bottom = 100% 100% (в правом нижнем углу).
Таким образом, для добавления фона в правый нижний угол для background-position можно указать значение right bottom или bottom right или 100% 100%. Они равнозначны и дают одинаковый результат.
CSS
Если вам нужно, чтобы фон повторялся на всех страницах вашего сайта, то без CSS не обойтись. Конечно, можно каждый раз прописывать путь, как в предыдущей главе. Но представьте, если со временем вам будет нужно его заменить: ссылка устареет или просто захочется поменять дизайн. Заходить на каждую страничку и менять код? Так не пойдет.
CSS помогает решить эту проблему. Вам нужно создать файл с расширением css и ввести следующий код:
<style>
body { background url(путь к файлу); }
</style>
|
Далее подключите этот документ к основному html и готово.
Давайте немного поговорим о самом коде. В скобках, после url вы можете вписать ссылку на картинку из стороннего источника, или просто название документа, если картинка лежит в одной папке с этим файлом.
background-image – фоновое изображение или градиент
CSS-свойство позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение .
Использовать в качестве фона изображение очень просто. Осуществляется это так:
Значение позволяет указать путь к файлу изображения, и оно будет отображаться в качестве фона для этого элемента.
Если размеры подключенной картинки меньше размеров области фона, то она по умолчанию будет повторяться бесконечное количество раз по горизонтали и вертикали пока не заполнит весь фон. Изменить это можно с помощью свойства .
В задать изображение можно также через URI данные:
кроме установки изображений, позволяет также задать линейный, радиальный или конический градиент.
Пример двухцветного линейного градиента, идущего сверху вниз:
С указанием угла и нескольких цветов:
Радиальный градиент указывается с помощью :
Пример конического градиента:
Кроме этого в CSS имеются повторяющиеся градиенты (, и ), с помощью них можно например, создавать различные узоры.
В приведенных выше примерах используется только один градиент, но вы можете накладывать несколько градиентов друг на друга. Используя эту технику можно создавать различные узоры, например:
Позиционирование фоновых изображений background-position
Свойство используется для позиционирования фона внутри хтмл-тэга. Также, как и предыдущее, является не наследуемым. В соответствии с принятым стандартом имеет вот такое дефолтное состояние: .
| background-position | |
|---|---|
| Значения: | |
| В качестве положений могут быть применены разные парные комбинации горизонтальных акронимов left (слева), center (по центру) и right (справа) совместно с вертикальными акронимами top (сверху), bottom (снизу), center (по центру). Каждый из акронимов символизирует местоположение фона внутри некоторой прямоугольной области. Если при задании горизонтального акронима вертикальный не будет задан, то вместо него автоматически подставится акроним . | |
| Вместо акронимов также существует вариант задания горизонтального и вертикального положений с помощью разных единиц измерения. Горизонтальные единицы отвечают за позиционирование фона относительно левой границы блока, а вертикальные — относительно верхней. Каждое из положений может быть задано с отрицательным значение, что позволяет выносить фон за пределы области html-контейнера (как бы обрезая картинку). Приведенные единицы могут быть использованы совместно для каждого положения. | |
| Присваивает правилу дефолтное знач-ие. | |
| «Говорит» веб-обозревателю, что данное свой-во необходимо наследовать у родителя. |
Примеры возможных вариантов положений:
Формат записи
Background как свойство в каскадных стилевых таблицах
Он задается или в отдельном файле с css стилями, или в элементе <style>. С помощью данного свойства можно устанавливать фоновые рисунки или цвет, указывать начальное местоположение на странице, задавать повторяющиеся и фиксированные изображения. Для большей наглядности я оформил определения в таблице.
| Параметры | Предназначение |
| background-attachment | Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit |
| background-image | Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка |
| background-position | Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях |
| background-repeat | Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space |
| background-color | Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка. |
| inherit | Наследует все характеристики родительского элемента |
Background-position
Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
- в фиксированных единицах (пикселы, сантиметры)
- в процентах
- словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
Рассмотрим примеры:
- background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
- background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
- background-position: right bottom — рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
| | | |
Например:
background #000 url("my-image.jpg") no-repeat fixed left bottom;
|
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
Как добавить два фона к одному элементу через CSS3?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ |
Решение
Современные браузеры позволяют добавлять к элементу произвольное число фоновых изображений, перечисляя параметры каждого фона через запятую. Достаточно воспользоваться универсальным свойством background и указать для него вначале один фон и через запятую второй.
Для примера рассмотрим создание вертикальных декоративных линий слева и справа от блока. Для этого вначале подготовим изображения, которые должны без стыков повторяться по вертикали. На рис. 1 показана фоновая картинка, которая будет выводиться по левому краю, а на рис. 2 картинка для вывода по правому краю.
Рис. 1. Фоновая картинка для границы слева
Рис. 2. Фоновая картинка для границы справа
В качестве блочного элемента к которому добавляется фон, обычно используется тег <div> в силу его удобства и универсальности, чтобы выделить его среди остальных элементов, к нему добавляется класс block (пример 1).
Пример 1. Два фоновых изображения
HTML5CSS3IECrOpSaFx
Результат данного примера показан на рис. 3.
Рис. 3. Вид блока с двумя фоновыми картинками
Альтернативный текст
Если у пользователя отключен режим загрузки изображений, то вместо картинки он увидит красный крестик или другую иконку – это зависит от браузера. Чтобы такого не было, мы можем дать подсказку, описать то, что изображено на картинке. Для этого используется параметр alt, который прописывается к тегу <img> в HTML-файле. Мы еще не говорили об этом, но здесь нет ничего сложного. Картинка загружается аналогично тому, что мы делали при использовании свойства «background-image».
Таким образом, если мы хотим добавить картинку к body, необходимо прописать следующие строчки кода:
<body>
<img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">
</body>
Также стоит сказать, что параметр alt позволяет поисковым системам отображать вашу фотографию. Если пользователь будет гуглить «Утренний завтрак», то в фотографиях поисковика будет ваша картинка.
Изображение в качестве ссылки
Через HTML-код мы также можем сделать так, чтобы картинка стала кликабельной. Это будет полезно, когда вы добавляете иконку социальной сети и хотите, чтобы пользователь по клику переходил на страницу соцсети.
Для этого в коде необходимо добавить тег <a href=»…»></a>, где href – ссылка на страницу. Внутри этого тега необходимо добавить картинку.
В результате должно получиться следующее:
<body>
<a href="vk.com"></a>
<img src="alondra-lucia--_os35-xQjc-unsplash.jpg" alt="Утренний завтрак">
</body>
Создание полупрозрачного фона в CSS
На сайтах полупрозрачность достигается за счет свойства opacity или задаваемого для фона формата цвета RGBA. Использование такого параметра поможет вам сделать текст более читабельным на фоновом изображении.
Например, чтобы сделать изображение на 50% тусклее, в CSS необходимо прописать следующее:
opacity: 0.5;
Значение opacity прописывается к классу так же, как мы это делали с другими свойствами.
Вставка нескольких фонов.
В СSS 3 появилась возможность одновременно использовать сразу несколько фоновых изображений для одного и того же элемента. Делается это с помощью уже знакомого нам свойства background-image с тем лишь отличием, что теперь можно указывать не один, а сразу несколько адресов к разным картинкам перечисляя их через запятую.. синтаксис такой:
background-image: url(fon1.jpg), url(fon2.jpg), url(fon3.jpg);
То изображение что идёт в списке первым будет находится поверх других остальные же будут подкладываться под него в том порядке в котором они перечислены.
Пример:
<!DOCTYPE html><html><head><meta charset=»utf-8″><title>Вставка нескольких фонов</title><style type=»text/css»>body {background-image:url(graphics/mammoth.gif), url(graphics/fon.gif);}h1,h2 {text-align: center;background:#ffffff;color: #008000;}</style></head><body><h1>У этой страницы сразу два фона!</h1><h2>Фон «штриховка» и фон «мамонтёнок» это два разных изображения.</h2></body></html>
смотреть пример
При использовании в качестве фона нескольких изображений к ним так же можно применять дополнительные свойства для работы с фоном такие как: background-attachment, background-repeat, background-position и т.д. Значения для этих свойств, в случае если картинок несколько, тоже же указывается через запятую, где первое значение предназначено для первого фона второе для второго и т.д.
Пример:
<!DOCTYPE html><html><head><meta charset=»utf-8″><title>Вставка нескольких фонов</title><style type=»text/css»>body {background-image:url(graphics/mammoth.gif), url(graphics/fon1.gif), url(graphics/fon.gif);background-repeat: no-repeat, repeat-x, repeat;background-position: center 100px, 0px 250px;}p {text-align: center;background:#ffffff;color: #008000;}</style></head><body><p>У этой страницы три фона и каждый из них использует свою позицию и параметры повторения.</p> </body></html>
смотреть пример
Атрибут background | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка
ячейки таблицы. В отличие от обычных изображений, для фона не устанавливаются
ширина и высота, и он всегда отображается в натуральную величину с масштабом
100%. Если рисунок по размеру меньше ширины или высоты ячейки, то картинка повторяется
по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на
месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для
посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный
контраст между ним и содержимым ячейки
В качестве фона допускается использовать
анимированные изображения в формате GIF, но они отвлекают внимание читателей
background-repeat
По умолчанию фоновое изображение, если его размер меньше размера элемента, будет заполнять объект полностью, повторяясь с левого верхнего к правому нижнему углу.
Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:
- repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
- repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.
repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.
no-repeat. Фон не будет повторяться вообще.
Обобщённое свойство для установки фона
Установить сразу несколько характеристик фона позволяет универсальное (обобщённое) свойство , которое появилось в стандарте CSS1 (). Свойство может применяться ко всем элементам и не наследуется потомками. Значение по умолчанию зависит от использования.
Синтаксис:
background: <image> <repeat> <position> <attachment> <color>
где
- <image> — значение, устанавливающее фоновый рисунок (см. описание свойства );
- <repeat> — значение, устанавливающее режим повторения фонового рисунка (см. описание свойства );
- <position> — значение, устанавливающее начальное положение фонового рисунка (см. описание свойства );
- <attachment> — значение, устанавливающее скроллинг фонового рисунка (см. описание свойства );
- <color> — значение, устанавливающее цвет фона (см. описание свойства в предыдущей статье).
Значения в свойстве могут идти в любом порядке, браузер сам определит, какое из них чему соответствует. Ни одно значение не является обязательным и может быть опущено.
Пример использования свойства:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
body {
background: url('images/bg.jpg') repeat-y 20px 0 fixed #c7b39b;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<p> Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.</p>
<p> Duis te feugifacilisi. Duis autem dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum.</p>
</body>
</html>
Результат в браузере:
Если с помощью свойства необходимо установить несколько фоновых картинок для элемента, то группы значений записываются через запятую. При этом значение для цвета фона необходимо указать в последней группе, описывающей картинку, которая будет располагаться в самом дальнем от пользователя слое, например:
body {
background: url('images/horline.jpg') repeat-x, url('images/verline.jpg') repeat-y, url('images/genbg.jpg') repeat #C7B39B;
}
Примечание: В дополнение к свойствам, описанным выше, в стандарте CSS3 были добавлены ещё несколько свойств, позволяющих управлять выводом фонового изображения. Это такие свойства, как , и . Однако на момент написания статьи в большинстве браузеров данные свойства либо не были реализованы вообще, либо были реализованы, но с некоторыми ошибками. Поэтому я не стал их рассматривать в этой статье.
Другие статьи по схожей тематике
- Цвет переднего плана и фона веб-страницы
- Способы указания цвета в стилевых свойствах
- Стандартные идентификаторы цветов
- Изображения в веб-документе
- Списки на веб-страницах