CSS: Фон
CSS свойства background используются для создания эффектов на заднем фоне страницы.
Список свойств для стилизации заднего фона, которые будут
рассмотрены ниже:
- background-color
- background-image
- background-repeat
- background-position
Добавление фонового изображения
Следующие правила добавляют цвет фона и фоновое изображение к элементу <body>. Затем мы задаем для элемента <div> (с классом wrapper) белый цвет фона:
Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента <body> и внутри элемента <div>. Если бы цвет фона для элемента <div> не был бы установлен, то в качестве фона был бы показан фон, который установлен для <body>, так как по умолчанию все элементы имеют прозрачный фон.
Свойство background-image позволяет указать картинку, которая будет отображаться в качестве фонового изображения для всей страницы или для отдельного элемента. В примере мы использовали фоновое изображение в качестве фона для всей страницы.
Если возникает вопрос зачем устанавливать цвет фона, когда используется фоновое изображение, то на него можно легко ответить: если по каким-либо причинам фоновое изображение не может быть загружено на страницу, в этом случае будет отображаться цвет фона.
Повтор фонового изображения
По умолчанию фоновое изображение повторяется по вертикали и по горизонтали заполняя таким образом все доступное пространство в элементе. Повтор фонового изображения можно переопределить с помощью свойства background-repeat, рассмотрим его возможные значения:
- no-repeat — фоновое изображение не повторяется
- repeat-x — повторяет фоновое изображение только по горизонтали
- repeat-y — повторяет фоновое изображение по вертикали
- repeat — фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)
Позиционирование фонового изображения
По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение — положение по горизонтали, второе — по вертикали.
Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
Если будет указано только одно значение, то по умолчанию вторым значением будет center:
это то же самое что и:
Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.
Фиксация фонового изображения
Вы наверное не раз заходили на сайты, на которых задний фон остается на месте, а содержимое страницы прокручивается как бы над ним. Этот эффект достигается с помощью свойства background-attachment, которое определяет, должно ли фоновое изображение оставаться на одном месте или оно будет прокручиваться вместе с остальным содержимым веб-страницы.
Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:
Объединение свойств
Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:
Несколько фоновых изображений
С помощью свойства background можно добавить несколько фоновых изображений к одному элементу. Для этого в качестве значения нужно указать список картинок, разделяя их запятой. Как и в случае с одной картинкой, к каждому фоновому изображению можно будет добавить дополнительные значения:
Добавление нескольких фоновых изображений поддерживается во всех новых версиях браузеров, включая IE9, однако следует учитывать, что в старых версиях браузеров, которые не поддерживают несколько фонов, правило для фона будет проигнорировано целиком.
Стоит отметить, что порядок указания картинок имеет важное значение. Первое добавляемое изображение будет отображаться над всеми остальными, последнее под всеми остальными фоновыми изображениями. Мы можем увидеть как это работает, если первым фоновым изображением задать картинку, которая не имеет прозрачных областей, в этом случае она будет перекрывать все остальные картинки, заданные для фона:
Если переставить наши картинки местами, сделав первую последней в списке, то она будет отображаться под всеми остальными изображениями, задавая основной фон для элемента:
Источник
Как сделать картинку фоном в HTML и CSS. 3 простых способа
Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).
Итак, требования к фоновому изображению у нас следующие:
- Покрывается 100% ширины и высоты страницы
- Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
- Сохраняются пропорции картинки (aspect ratio)
- Изображение центрировано на странице
- Фон не вызывает скроллов
- Решение максимально кроссбраузерное
- Не используются никакие другие технологии кроме CSS
Способ 1
На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.
Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .
Этот способ работает в
Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+
Способ 2
В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.
Этот способ работает в:
- Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
- IE 9+
Способ 3
Еще один способ заключается в следующем: фиксируем изображение <img /> к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.
Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в <div />, который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.
Этот способ работает в хороших браузерах и IE 8+.
Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.
Источник
Работа с фоном элемента в CSS
В этом учебнике мы уже рассмотрели с вами такие аспекты работы с изображениями как использование свойств границ (цвет, стиль и толщина), научились задавать тень для изображений (Статья «Тень элемента в CSS»), рассмотрели, как можно создать эффект рамки, добавив задний фон и пустой промежуток между границей и изображением (Статья «Блочная и строчная модель в CSS»). Научились делать изображения плавающими (Статья «Плавающие элементы в CSS») и позиционировать их относительно краев родительского элемента, научились управлять внешними отступами между элементами, но всего этого пока не достаточно.
Для того чтобы Вы смогли создавать по настоящему красочные, яркие и уникальные сайты, вам необходимо познакомиться и изучить методы работы с задним фоном и с таким свойством как background-image, которое позволяет задать одно или несколько фоновых изображений для элемента.
Фон элемента это общий размер элемента, включая значения внутренних отступов (padding) и границ (border), но, не включая значение внешних отступов – свойство margin.
В настоящее время браузеры работают с тремя графическими форматами:
- GIF (англ. Graphics Interchange Format — формат для обмена изображениями).
- JPEG (англ. Joint Photographic Experts Group — название организации-разработчика).
- PNG (англ. Portable network graphics — растровый формат хранения графической информации).
Чтобы задать изображение в качестве заднего фона необходимо использовать свойство background-image и указать путь к файлу изображения, который может быть как относительный, так и абсолютный:
Обращаю Ваше внимание на то, что при использовании относительного пути фоновое изображение необходимо указывать относительно адреса файла таблицы стилей, а не HTML страницы на которой предполагается использование фонового изображение.
Давайте рассмотрим пример, в котором установим задний фон, который представляет из себя три разноцветных квадрата размером 100 на 100 пикселей для элемента <body>:
По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент <body> полностью заполнился фоновым изображением.
Желательно всегда устанавливать цвет заднего фона в качестве альтернативы изображению, в этом случае, если изображение по каким-то причинам не будет загружено, то будет использован заданный Вами цвет. Запомните этот момент, мы не будем к нему возвращаться в статьях этого учебника.
Результат нашего примера:
Рис. 115 Пример установки изображения в качестве фона.
Управление повтором фонового изображения
Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.
Это свойство имеет следующие доступные значения:
| Значение | Описание |
|---|---|
| repeat | Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию. |
| repeat-x | Фоновое изображение будет повторяться по горизонтали (по оси x). |
| repeat-y | Фоновое изображение будет повторяться по вертикали (по оси y). |
| no-repeat | Фоновое изображение не будет повторяться. |
Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.
По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:
- Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat ), это значение чаще всего используется в работе.
- Второй блок получил значение repeat-x , которое определяет, что фоновое изображение будет дублироваться по горизонтали.
- Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y ).
Результат нашего примера:
Рис. 116 Пример управления повтором фонового изображения.
Управление позицией фонового изображения
По умолчанию, фоновое изображение позиционируется в верхнем левом углу элемента, используя CSS свойство background-position мы можем изменить это положение с использованием единиц измерения CSS, либо используя ключевые слова:
| Значение | Описание |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | Задает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Если вы указываете только одно ключевое слово, другое значение будет «center» |
| x% y% | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0% 0% (это значение по умолчанию). В правом нижнем углу 100% 100%. Если указано только одно значение, то другое значение будет 50%.  |
| x y | Задает положение изображения. Первое значение — горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения. |
Рассмотрим пример использования этого свойства:
В данном примере, мы создали 10 блоков с различными классами, в которых заданы различные значения, связанные с позиционированием фоновых изображений. Для первых девяти блоков были использованы всевозможные ключевые слова, а для последнего блока было задано значение для горизонтального позиционирования в пикселях, а для вертикального в процентах.
Результат нашего примера:
Рис. 117 Пример позиционирования фонового изображения.
Фиксированный задний фон
Когда вы прокручиваете содержимое страницы фоновое изображение, как правило, прокручивается вместе с содержимым. Это значение используется по умолчанию и подходит для большинства задач, но средствами CSS вы можете изменить такое поведение заднего фона, например, зафиксировав его.
Давайте с Вами рассмотрим, как с помощью свойства background-attachment сделать «параллакс» эффект.
В данном примере для всех элементов <div> мы установили высоту равную 600px и разместили три таких блока на странице. Для среднего блока мы создали класс .primerFixed, который задает для элемента фиксированный задний фон элемента, центрирует его и тиражирует по горизонтали (ось x). Для демонстрации эффекта «параллакс» откройте пример в отдельном окне браузера и прокрутите страницу вниз.
Результат нашего примера:
Рис. 118 Пример фиксированного фонового изображения.
Свойства CSS 3 для работы с фоновыми изображениями
Настало время углубить свои знания в работе с задним фоном элементов и познакомиться с новыми свойствами CSS, которые были введены в стандарте CSS 3.
И первое CSS свойство, которое мы рассмотрим — background-origin
, оно определяет как позиционируется фоновое изображение, или изображения по отношению к границе, внутреннему отступу и содержимому элемента.
Возможные значения этого свойства:
| Значение | Описание |
|---|---|
| padding-box | Фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию. |
| border-box | Фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента). |
| content-box | Фоновое изображение позиционируется от верхнего левого угла содержимого элемента. |
Рассмотрим применение этого свойства:
В данном примере мы разместили три блока, задали для них задний фон в виде изображения и указали для них различные значения свойства background-origin:
- Первый блок ( padding-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение не заходит под границу элемента с этих сторон). Это значение по умолчанию.
- Второй блок ( border-box ) — фоновое изображение позиционируется от верхнего левого угла элемента (изображение заходит под границу элемента со всех сторон).
- Третий блок ( content-box ) — фоновое изображение позиционируется от верхнего левого угла содержимого элемента (изображение не заходит под границу элемента с этих сторон).
Результат нашего примера:
Рис. 119 Пример использования свойства background-origin.
И так на очереди следующее CSS свойство — background-clip, оно определяет ту область элемента, для которой будет задан задний фон.
У Вас может возникнуть вопрос: — А в чем собственно заключается разница между свойством background-origin alt=»css3″/> и background-clip alt=»css3″/>?
Разница заключается в том, что свойство background-clip в отличие от background-origin обрезает ту часть фона, которая выходит из указанных рамок. Свойство background-origin лишь определяет, как позиционируется фоновое изображение.
В таблице представлены возможные значения этого свойства:
| Значение | Описание |
|---|---|
| border-box | Фон элемента занимает все пространство (включая границы элемента). Это значение по умолчанию. |
| padding-box | Фон элемента занимает все пространство (не включая границ элемента). |
| content-box | Фон элемента занимает все содержимое элемента (если у элемента установлены значения padding (внутренние отступы), то это пространство не будет окрашено). |
Давайте рассмотрим следующий пример:
В этом примере мы разместили три блока, установили для них задний фон в виде изображения и указали различные значения свойства background-clip:
- Первый блок ( padding-box ) — фон элемента занимает все пространство. Это значение по умолчанию.
- Второй блок ( border-box ) — фон элемента занимает все пространство (не включая границы элемента).
- Третий блок ( content-box ) — фон элемента занимает все содержимое элемента.
Результат нашего примера:
Рис. 120 Пример использования свойства background-clip.
Как вы могли заметить свойства background-origin alt=»css3″/> и background-clip alt=»css3″/>, имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.
На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size, оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.
Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:
| Значение | Описание |
|---|---|
| auto | Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию. |
| length | Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto . |
| % | Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto . |
| cover | Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения. |
| contain | Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента. |
Рассмотрим применение этого свойства:
В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size:
- Первый блок ( auto ) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
- Второй блок ( 100px 100px ) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
- Третий блок ( 70% 70% ) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
- Четвертый блок ( cover ) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
- Пятый блок ( contain ) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.
Результат нашего примера:
Рис. 121 Пример масштабирования фоновых изображений.
Универсальное свойство background
Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.
Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.
Свойство background имеет следующий синтаксис:
Где значения соответствуют вышерассмотренным нами свойствам:
- ( color | transparent ). ( url | none ). ( значение ). ( auto | length | cover | contain ). ( repeat | repeat-x |repeat-y | no-repeat ). ( padding-box | border-box | content-box ). ( border-box | padding-box | content-box ). ( scroll | fixed | local ).
Давайте рассмотрим пример использования универсального свойства background:
И так, что мы сделали в этом примере:
- Мы установили для элементов <html> и <body> высоту 100% , убрали внутренние и внешние отступы.
- Для элемента <header>
задали минимальную высоту равную 34% от родительского элемента, ширину установили 100% . В качестве заднего фона установили изображение — url(‘cat_g.jpg’) , позиционировали его по низу и масштабировали фоновое изображение под размеры элемента ( center / contain — background-position / background-size). Без косой черты, как и без позиции фонового изображения работать не будет. - Для элемента <div> с классом .primer2 задали минимальную высоту равную 66% от родительского элемента, ширину установили 100% . В качестве заднего фона установили два различных изображения, позиционировали их по центру ( center ) и масштабировали их (первое изображение полностью помещается — значение contain , второе изображение масштабируется под размеры элемента cover ).
задали минимальную высоту равную 34% от родительского элемента, ширину установили 100% . В качестве заднего фона установили изображение — url(‘cat_g.jpg’) , позиционировали его по низу и масштабировали фоновое изображение под размеры элемента ( center / contain — background-position / background-sizeРезультат нашей работы:
Рис. 122 Пример использования универсального свойства background.
Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо. Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:
Практическое задание № 28.
Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Источник
Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов
Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.
Если же вы впервые слышите о каскадных таблицах стилей, то предлагаю вам для начала ознакомиться со статьей о том, что такое css и как их подключить к html документу.
Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:
- background-color — задает цвет фона для любого Html элемента;
- background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
- background-repeat — параметр повторения фоновой картинки;
- background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
- background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.
Далее рассмотрим подробнее каждое свойство.
Background-color и background-image
Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.
Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:
Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.
Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:
<p style=»background-color:#000000; color:#ffffff»>У этого абзаца черный фон и белый текст</p>
Либо так в коде CSS файла:
p <
background-color:#000000;
color:#ffffff
>
У этого абзаца черный фон и белый текст
Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:
background-image: none|url(<интернет-адрес файла изображения>)
По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:
<p style=»background-image: url(//webcodius.ru/example/fonp.jpg)»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.</p>
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.
А вот оригинальный вид фонового изображения:
Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.
Как вы могли заметить из примера, если фоновое изображение меньше, чем элемент страницы, для которого оно задано, то картинка повторяется по вертикали и горизонтали пока не замостит собой весь элемент. Параметры этого повторения задает следующий элемент.
Background-repeat — параметры повторения фонового изображения
Свойство background-repeat может принимать следующие значения:
no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:
<p style=»background-image: url(//webcodius.ru/example/fonp.jpg); background-repeat:no-repeat;»>Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.</p>
В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.
repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.
repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.
repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:
Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.
Позиционирование фона с помощью background-position
Позицию фонового изображения относительно элемента web страницы для которого оно назначено можно указать с помощью свойства background-position:
background-position: <горизонтальная позиция>
Горизонтальная позиция может принимать следующие значения:
В качестве числовых значений могут использоваться как абсолютные (например px), так и относительные величины (например проценты) и они указывают местоположение фонового изображения в элементе по горизонтали.
- left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру элемента;
- right — фон прижимается к правому краю элемента.
Вертикальная позиция может иметь следующие значения:
Числовое значение указывает местоположение фонового изображения по вертикали и задается абсолютными или относительными единицами измерения.
- top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
- center — фоновое изображение располагается по центру;
- bottom — фон прижимается к нижнему краю.
В случае использования ключевых слов для задания вертикальной и горизонтальной позиции, то порядок их следования не имеет значения. Если же, например, использовать пиксели или процентную запись, то сначало задается положение фонового рисунка по горизонтали, а затем, через пробел, положение по вертикали.
Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:
background-image:url(//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;
Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.
То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:
Вообще соотношение между ключевыми словами и процентной записью следующее:
- 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% (по правому нижнему углу)
На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.
Фиксация фона background-attachment
По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:
scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.
Обычно фиксируют фоновый рисунок заданный для все веб страницы, а для отдельных элементов оставляют прокручивающийся фон.
Сборное правило background
Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.
Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:
background: url(//webcodius.ru/example/logo.png) 50% no-repeat;
А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:
Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!
Источник