Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или


Содержание материала:

Урок 3: Цвет и фон в CSS

Этот урок мы посвятим такому важному моменту как цвет и фон в CSS . Вы увидите, как прикольно, и насколько эффективнее чем в html, все это работает!

Запомни: цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

Основными свойствами цвета и фона в CSS являются:

А теперь подробнее, и по-порядку:

Свойство COLOR

Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

H1 <
color: red ;
>
P
<
color: green ;
>

Для удобства восприятия я выделил свойства и их значения разными цветами.

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы(т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить что нам нужно.

Ну вот например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY — т.к. именно он отвечает за тело документа , т.е. за всю страницу.

BODY <
background-color : #FFEE8C ;
>
H1 <
color: red ;
background-color : blue ;
>
P
<
color: green ;
>

Точно так же, можно было бы задать фоновый цвет и для параграфов. Для закрепления материала попробуйте поэкспериментировать.

↑ Наверх ↑

Свойство BACKGROUND-IMAGE

Данное свойство используется для задания фонового изображения. В примере ниже, я укажу фоновое изображения для всей страницы, т.е. для элемента BODY.

BODY <
background-color : #FFEE8C ;
background-image : url(smile.png) ;
>
H1 <
color: red ;
background-color :blue ;
>
P
<
color: green ;
>

Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, Без пробелов. в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png) , ну Вы поняли.

Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы. Вверху, две картинки смайлика — большая и маленькая. Попробуйте сохранить их себе на компьютер и потренироваться. Большой смайлик поставьте на фон всей страницы, а маленький — на фон заголовков первого уровня.

Кто не знает, чтобы сохранить изображение просто наведите на него указатель, клацните правой кнопкой и выберите «Сохранить рисунок».

↑ Наверх ↑

Свойство BACKGROUND-REPEAT

Вы наверное заметили, что фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, , пока не заполнит весь экран. Так вот, с помощью свойства background-repeat мы можем контролировать эти повторения.
Это свойство может принимать четыре значения:

Background-repeat: repeat-x ; повторение по горизонтали Смотри пример
Background-repeat: repeat- y ; повторение по вертикали Смотри пример
Background-repeat: repeat ; по вертикали и по горизонтали (значение по-умолчанию) Смотри пример
Background-repeat: no-repeat ; не повторяется Смотри пример

Это очень полезное свойство, и аналогов ему в html нет.

Пример записи стиля:

BODY <
background-image : url(smile.png) ;
background-repeat: repeat-x;
>

Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, т.е. фоновое изображение будет повторяться как по вертикали, так и по горизонтали.

↑ Наверх ↑

Свойство BACKGROUND-ATTACHMENT

При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:
SCROLL
— фон прокручивается вместе с содержимым;
FIXED — фон строго зафиксирован.

BODY <
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: scroll ;
>

BODY <
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed ;
>

Значение по умолчанию — scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

Ну как разобрались? здесь нет ничего сложного, экспериментируйте. Попробуйте сделать так, чтобы фон например размножался по вертикали, и был строго зафиксирован.

↑ Наверх ↑

Свойство BACKGROUND-POSITION

Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования(точка это типа изображение, а то что под ней — приблизительные координаты)

В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.

Также положение можно задавать специальными словами:
left — лево, right — право, center -центр, top — верх, bottom — низ . Смотрите рисунок:

BODY <
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position : top right ;
>

BODY <
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 300px 500px ;
>

BODY <
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-position: 75% 25% ;
>

↑ Наверх ↑


Сокращенная форма записи — BACKGROUND

Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.

Порядок свойств этого элемента таков:

background-color _ background-image _ background-repeat _ background-attachment _ background-position

Т.е. просто записывается пять значений свойств через пробел.Рассмотрев пример ниже Вам станет все понятно:

То что записано так:

BODY <
background-color:#ffee8c ;
background-image : url(smile.png) ;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
>

Можно записать одной строчкой:

BODY <
background: #ffee8c url(smile.png) no-repeat fixed top right ;
>

Как видите, пишем значения свойств через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по- умолчанию.

Ничего сложного здесь нет. Попрактикуйтесь, и Вы все запомните!

CSS-фон

Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

background-color

Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

Например, цвет фона всей страницы можно настроить так:

background-image

Устанавливает в качестве фона картинку. Если изображение подобрано правильно, то страница на его фоне будет выглядеть гораздо красивее, чем на фоне одноцветном.

Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

Для одного и того же веб-элемента можно установить несколько фоновых рисунков. Для этого достаточно перечислить их все в свойстве background-image через запятую:

Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.

background-repeat

По умолчанию фоновое изображение, если его размер меньше размера элемента, будет заполнять объект полностью, повторяясь с левого верхнего к правому нижнему углу.

Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:

  • repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
  • repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.
  • repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.
  • no-repeat. Фон не будет повторяться вообще.

background-position

Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

Также картинку можно позиционировать зарезервированными словами.

  • Для горизонтального расположения используются слова left, center и right (по левому краю, по центру и по правому краю соответственно).
  • По вертикали положение задают значения top, center и bottom — позиционирование сверху, по центру и снизу.

Свойство background-repeat позволяет устанавливать в качестве фона несколько картинок и задавать правила так, чтобы изображения не накладывались друг на друга. Чтобы это сделать, достаточно перечислить пары координат для всех фоновых рисунков в одном правиле. Например, позиционировать три картинки можно так:

background-attachment

Определяет, будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет оставаться неподвижной. Значения могут быть такими:

  • fixed — фон зафиксирован.
  • scroll — фон разблокирован (прокручивается)
  • local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

background-clip

Определяет, как фоновое изображение или цвет фона будут выводиться относительно границ элемента.


  • content-box — фон отображается только под содержимым.
  • border-box — выводится и под контентом, и под границами.
  • padding-box — отображается внутри границ.

background-origin

То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

  • content-box — фон располагается относительно контента родительского элемента.
  • border-box — фон позиционируется относительно границы родителя, при этом рамки могут фон перекрывать.
  • padding-box — фон отображается до границ элемента-родителя, при этом границы на него не заходят.

background-size

Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

В правиле можно использовать ещё два значения.

  • cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
  • contain. Помещает изображение внутрь блока, сохраняет пропорции.

background

Позволяет объединить значения перечисленных свойств в одной строке:

В примере между свойствами background-position и background-size стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс.

Оформление фона в CSS

В CSS существует группа свойств для оформления фона HTML элементов:

  • background-attachment
  • background-color
  • background-image
  • background-position
  • background-repeat

Цвет фона

CSS свойство background-color позволяет установить цвет фона для выбранного элемента.

Пример ниже делает цвет фона страницы зеленым:

Цвет может быть задан следующими способами:

  1. С помощью имени (например green задаст зеленый цвет);
  2. С помощью RGB значения (‘rgb(255,0,0)’ задаст красный цвет);
  3. С помощью шестнадцатеричного значения («#0000ff» задаст синий цвет).

Изображение в качестве фона

С помощью CSS свойства background-image Вы можете вставить произвольное изображение в качестве фона.

По умолчанию, изображение будет повторяться пока не заполнит все содержимое элемента.

Обратите внимание: всегда тщательно подбирайте цвета. Фоновое изображение не должно сливаться с текстом.

Повторяющееся изображение в качестве фона это не всегда, то что нужно.

CSS свойства background-repeat позволяет определить как должно повторяться фоновое изображение при вставке:

  • background-repeat:repeat-x — изображение будет повторяться только по горизонтали;
  • background-repeat:repeat-y — изображение будет повторяться только по вертикали;
  • background-repeat:no-repeat — изображение не будет повторяться.

CSS свойство background-position позволяет задавать местоположение фонового изображения.

В качестве первого значения данного свойства должна задаваться величина смещения изображения по горизонтали, а в качестве второго величина смещения по вертикали.

Величина смещения может быть указана как с помощью пикселей (px), процентов (%) и сантиметров (cm) (background-position:50px 30px;), так и с помощью предопределенных ключевых слов (background-position:right top;).

Топ-пост этого месяца:  Как можно сделать, чтобы таблицы, фильровались, как и картинки в the_excerpt()

CSS свойство background-attachment позволяет прикреплять фоновые изображения к определенным местам.

Прикрепленное изображение будет оставаться на данном месте даже при прокрутке страницы.

Краткая форма записи

Для того, чтобы сократить итоговый размер кода в CSS была предусмотрена краткая форма записи некоторых свойств.

Для краткой записи оформления фона элементов в CSS предусмотрено свойство background.

При использовании стенографической формы записи соблюдайте следующий порядок следования свойств:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Обратите внимание: Вы можете пропускать неиспользуемые значения.

Список всех свойств оформления фона

Для того, чтобы узнать больше о желаемом свойстве щелкните по его названию.

Свойство Описание Значение
background Устанавливает все возможные свойства фона за одно определение background-color
background-image
background-repeat
background-attachment
background-position
background-attachment Указывает будет ли фоновая картинка привязана к одному месту, или будет прокручиваться вместе с текстом. scroll
fixed
background-color Устанавливает фоновый цвет элемента. rgb(x,x,x)
#xxx
название_цвета
background-image Устанавливает фоновую картинку для элемента url(URL)
none
background-repeat Указывает как фоновая картинка будет повторяться repeat
repeat-x
repeat-y
no-repeat
background-position Указывает координаты расположения фоновой картинки. left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

x% y%
xpos ypos

Сделайте сами

Задание 1 вставьте картинку паучка и переместите ее в рамку (подробности в редакторе).

background-repeat

Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Краткая информация

Значение по умолчанию repeat
Наследуется Нет
Применяется Ко всем элементам
Анимируется Нет

Синтаксис ?

= repeat-x | repeat-y | [repeat | space | round | no-repeat]

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Песочница

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Повторение фона по горизонтали

Сама фоновая картинка приведена на рис. 2.

Рис. 2. Фон для блока

Объектная модель

Спецификация ?

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

один фон 4 12 1 3.5 1 1
несколько фонов 9 12 1 10.5 1.3 3.6
один фон 2.1 1 10 3.2
несколько фонов 2.1 1 10 3.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — свойство полностью поддерживается браузером со всеми допустимыми значениями;
  • — свойство браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.

Число указывает версию браузера, начиная с которой свойство поддерживается.

CSS3. Работа с множественными фонами

Мы уже ранее затрагивали возможности модуля CSS3 Backgrounds and Borders, рассматривая работу с тенями (box-shadow). Сегодня мы немного поговорим о еще одной интересной возможности — использовании нескольких изображений в фоне.

Композиция фонов

Существует множество причин, по которым, вам вообще может потребоваться композиция нескольких изображений в фоне, среди них наиболее важные — это:

  • экономия трафика на размере изображений, если отдельные изображения в сумме весят меньше, чем изображение со сведенными слоями, и
  • необходимость независимого поведения отдельных слоев, например, при реализации эффектов паралакса.

Могут быть и другие разумные причины 🙂

Классический подход


Итак, нам нужно разместить несколько фоновых изображений одно над другим. Как обычно решается эта задача? Очень просто: на каждое фоновое изображение создается блок, которому прописывается соответствующее фоновое изображение. Блоки либо вкладываются друг в друга, либо размещаются подряд с соответствующими правилами позиционирования. Вот простой пример:

Блок с классом «fishing» внутри «mermaid» исключительно для демонстрационных целей.

Теперь немного стилей:

В данном примере три вложенных фона и один блок с рыбками, расположенный рядом с «фоновыми» блоками. В теории, рыбок можно перемещать, например, с помощью JavaScript или CSS3 Transitions/Animations.

Кстати, в этом примере для «.fishing» используется новый синтаксис для позиционирования фона, также определенный в CSS3:

На текущий момент он поддерживается в IE9+ и Opera 11+, но не поддерживается в Firefox 10 и Chrome 16. Так что пользователи последних двух браузов поймать рыбку пока не смогут.

Поехали дальше. Как упростить эту конструкцию?

Множественные фоны

На помощь приходит новая опция, добавленная в CSS3, — возможность определять сразу несколько фоновых изображений для одного элемента. Выглядит это следующим образом:

И соответствующие стили:

Для определения множественных изображений необходимо использовать правило background-image, перечисляя отдельные изображения через запятую. Дополнительными правилами, также списком, можно задать позиционирование, повторы и другие параметры для каждого из изображений. Обратите внимание на порядок перечисления изображений: слои перечисляются слева направо от самого верхнего к самом нижнему.

Результат полностью совпадает:

Одним правилом

Если рыбок не нужно выделять в отдельный блок для последующих манипуляций, всю картинку можно переписать одним простым правилом:

Картинку с результатом приводить не буду — поверьте, она совпадает с двумя картинками выше. А вот на стили обратите внимание еще раз, особенно на «background-repeat» — согласно спецификации, если часть списка в конце пропущена, то браузер должен повторить указанный список нужное число раз, чтобы соответствовать количеству изображений в списке.

В данном случае, это эквивалентно такому описанию:

Еще короче

Если вы помните CSS 2.1, в нем определена возможность описывать фоновые изображения в краткой форме. Как на счет множественных изображений? Это также возможно:

Но обратите внимание, что теперь пропускать просто так значения нельзя (если только они не совпадают со значением по умолчанию). Кстати, если вы хотите задать цвет фонового изображения, это надо делать в самом последнем слое.

Динамичные изображения

Если композиция статична или динамична не более, чем в зависимости от размеров контейнера, тогда множественные фоны очевидно упрощают конструкцию страницы. А что делать, если с отдельными элементами композиции нужно работать независимо из javascript (перемещать, прокручивать и т.п.)?

Кстати, вот пример из жизни — тема с одуванчиком в Яндексе:

Если вы залезете в код, вы увидите там примерно следующее:

Блоки с классами «b-fluff-bg», «b-fluff__cloud» и «b-fluff__item» содержат фоновые изображения, накладывающиеся друг на друга. Причем фон с облаками постоянно прокручивается, а одуванчики летают по экрану.

Можно ли это переписать с использованием множественных фонов? В принципе, да, но при условии 1) поддержки этой возможности в целевых браузерах и… 2) читайте дальше 😉

Как добавить динамики множественным фонам? В такой ситуации оказывается удобным, что во внутреннем представлении браузер раскидывает отдельные параметры фоновых изображения по соответствующим правилам. Например, для позиционирования есть «background-position», и для сдвигов достаточно изменять только его. Однако имеется и плата за использование множественных изображений — в этом правиле (и любом аналогичном) необходимо перечислять позицию для всех фонов, заданных для вашего блока, и нельзя сделать это выборочно.

Чтобы добавить нашему фону с рыбками анимации, можно использовать такой код:

И, кстати, анимации также можно делать через CSS3 Transitions/Animations, но это тема для отдельного обсуждения.

Паралакс и интерактив

Наконец, схожими маневрами можно легко добавить эффекты паралакса или интерактивного взамодействия с фоном:

Множественные фоновые изображения удобны в подобных сценариях, так как пока мы говорим только про фон (а не контент), их использование позволяет избежать замусоривания html-кода и DOM. Но за все приходится платить: я не могу обращаться к отдельным элементам композиции по имени, id, классу или какому либо другому параметру. О порядке элементов в композиции я должен явно помнить в коде и на каждое изменение любого параметра любого элемента фактически я должен склеивать строку, описывающую значения этого параметра для всех элементов, и обновлять ее для всей композиции.

Уверен, что это можно обернуть в удобный код на javascript, который возьмет на себя виртуализацию взаимоотношений с отдельными слоями, оставляя при этом html-код страницы максимально чистым.

Что там с совместимостью?

Все современные версии популярных браузеров, включая IE9+, поддерживают множественные изображения (можно сверяться, например, с сaniuse).

Вы также можете использовать Modernizr, чтобы предоставлять браузерам, не поддерживающим множественные фоны, альтернативные решения. Как написал Chris Coyier в заметке о порядке слоев при использовании множественных фонов, делайте примерно так:

Если вас смущает использование JS для предоставления обратной совместимости, вы можете просто дважды объявить background, правда, это тоже имеет свои минусы в виде возможной двойной загрузки ресурсов (это зависит от реализации обработки css в конкретном браузере):

Если вы уже начали думать о Windows 8 имейте в виду, что вы можете использовать множественные фоны при разработке metro style приложений, так как внутри используется тот же движок, что и в IE10.

Работа с фоном элемента в 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 пикселей для элемента :

По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали, в нашем примере это привело к тому, что элемент полностью заполнился фоновым изображением.

Желательно всегда устанавливать цвет заднего фона в качестве альтернативы изображению, в этом случае, если изображение по каким-то причинам не будет загружено, то будет использован заданный Вами цвет. Запомните этот момент, мы не будем к нему возвращаться в статьях этого учебника.

Результат нашего примера:

Рис. 115 Пример установки изображения в качестве фона.

Управление повтором фонового изображения

Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.

Это свойство имеет следующие доступные значения:

Значение Описание
repeat Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию.
repeat-x Фоновое изображение будет повторяться по горизонтали (по оси x).
repeat-y Фоновое изображение будет повторяться по вертикали (по оси y).
no-repeat Фоновое изображение не будет повторяться.

Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.

По аналогии с предыдущим примером для мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства 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 сделать «параллакс» эффект.

В данном примере для всех элементов

Результат нашего примера:

Рис. 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 и background-clip ?

Разница заключается в том, что свойство 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 и background-clip , имеет смысл применять только тогда, когда у элемента есть внутренние отступы, либо границы.

На очереди следующее свойство, которое позволит нам в полной мере управлять задним фоном элемента по своему усмотрению — это свойство background-size , оно имеет широкое применение в современной верстке сайтов, так как позволяет управлять размером фонового изображения.

Установить размер заднего фона допускается с использованием единиц измерения CSS, процентов, либо ключевых слов:

Значение Описание
auto Фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
length Устанавливает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto .
% Устанавливает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение задает высоту. Если указано только одно значение, то для второго устанавливается значение auto .
cover Масштабирует фоновое изображение под размеры элемента. Некоторые части фонового изображения могут быть скрыты из поля зрения.
contain Масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Рассмотрим применение этого свойства:

В данном примере мы разместили пять блоков, задали для них задний фон в виде изображения и указали для них различные значения свойства background-size :

  • Первый блок ( auto ) — фоновое изображение содержит свою ширину и высоту. Это значение по умолчанию.
  • Второй блок ( 100px 100px ) — первое значение устанавливает ширину, второе значение задает высоту в пикселях.
  • Третий блок ( 70% 70% ) — первое значение устанавливает ширину, второе значение задает высоту в процентах.
  • Четвертый блок ( cover ) – масштабирует фоновое изображение под размеры элемента (некоторые части фонового изображения скрываются из поля зрения).
  • Пятый блок ( contain ) – масштабирует фоновое изображение, чтобы оно целиком поместилось внутри элемента.

Результат нашего примера:

Рис. 121 Пример масштабирования фоновых изображений.

Универсальное свойство background

Мы с Вами рассмотрели все свойства, которые предназначены для работы с фоновыми изображениями. В большинстве случаев вводить длинные названия рассмотренных выше свойств непродуктивно, но это не значит, что мы зря потратили на это время — без понимания как они работают по отдельности, вы не сможете грамотно их применять в одном объявлении.

Существует более простой метод задать значения всех свойств для работы с задним фоном в одном объявлении, используя универсальное свойство background.

Свойство background имеет следующий синтаксис:

Где значения соответствуют вышерассмотренным нами свойствам:

  • background-color ( color | transparent ).
  • background-image ( url | none ).
  • background-position ( значение ).
  • background-size ( auto | length | cover | contain ).
  • background-repeat ( repeat | repeat-x |repeat-y | no-repeat ).
  • background-origin ( padding-box | border-box | content-box ).
  • background-clip ( border-box | padding-box | content-box ).
  • background-attachment ( scroll | fixed | local ).

Давайте рассмотрим пример использования универсального свойства background:

И так, что мы сделали в этом примере:

  • Мы установили для элементов и высоту 100% , убрали внутренние и внешние отступы.
  • Для элемента задали минимальную высоту равную 34% от родительского элемента, ширину установили 100% . В качестве заднего фона установили изображение — url(‘cat_g.jpg’) , позиционировали его по низу и масштабировали фоновое изображение под размеры элемента ( center / contain — background-position / background-size ). Без косой черты, как и без позиции фонового изображения работать не будет.
  • Для элемента

Результат нашей работы:

Рис. 122 Пример использования универсального свойства background.

Обращаю Ваше внимание на то, что установка нескольких фоновых изображений в качестве заднего фона для одного элемента выполнена для демонстрации возможностей CSS. В большинстве случаев проще установить один задний фон для одного элемента, а уже этот элемент настроить и позиционировать в документе как вам необходимо. Подробное изучение позиционирования элементов будет освещено далее в учебнике в статье «Позиционирование элементов в CSS».

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

  • Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл и три изображения) в любую папку на вашем жестком диске:
  • Используя полученные знания составьте следующий документ (внимательно изучите страницу перед выполнением):

    Практическое задание № 28.

    Подсказка: для того, чтобы отцентровать содержимое, необходимо указать значение auto для внешних отступов слева и справа, обратите внимание, что в примере использована тень для блоков.

    Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

    Задание фона с помощью CSS свойства Background

    Дата изменения: 22.11.2015

    С помощью CSS свойства background, мы можем задавать задний фон элемента в том числе, изменять цвет, устанавливать фоновое изображение и режимы его отображения.

    Изменение фонового цвета блока с помощью CSS свойства background-color

    Мы можем устанавливать цвет фона с помощью всех доступных цветовых схем CSS

    Задание фонового изображения с помощью CSS свойства background-image

    CSS свойство background-image, позволяет нам установить фоновое изображение, например использовать в качестве изображения картинку, расположенную по заданному url адресу

    Повторение фонового изображения с помощью CSS свойства background-repeat

    Данное свойство позволяет размножить изображение маленького размера по всему размеру блока методом дублирования изображения по оси x и y. По умолчанию, это свойство установлено в значение repeat, и повторяется по обоим осям, это первое что пугает начинающего верстальщика — вы хотели установить маленький логотип в углу экрана, а в результате он продубливался по всему блоку.

    Вот список значений , которые может принимать свойство background-repeat:

    • repeat. Изображение дублируется по всем осям.
    • no-repeat. Картинка не дублируется (здесь ваше спасение)
    • repeat-x. Повторяется только по горизонтали
    • repeat-y. Только по вертикали

    Расположение фона с помощью CSS свойства background-position

    С помощью этого свойства, вы можете определить, в каком конкретном месте хотите расположить фоновое изображение. Оно может принимать значения как в пикселях и процентах, так и вспомогательные конструкции center, left, right, top, bottom

    Несколько фоновых изображений в одном блоке

    CSS3 дает нам возможность устанавливать сразу несколько фоновых изображений для одного элемента, для этого достаточно перечислить их через запятую и воспользоваться свойствами background-position и background-repeat, которые были описаны выше, для того, чтобы настроить их расположение

    Задание разера фонового изображения в CSS

    Для того, чтобы задать размер фонового изображения установленного с помощью свойства background-image, необходимо воспользоваться CSS свойством background-size и установить нужный размер изображения

    Также, свойство background-size, может принимать значения:

    • contain. — Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
    • cover — Тоже самое, но масштабирует по наименьшей из сторон

    Фиксированное фоновое изображение

    fixed. — Изображение не прокручивается

    local — Изображение прокручивается с контентом, но не с элементом, его содержащим

    scroll — Изображение прокручивается с элементом, его содержащим

    Использование градиента в качестве фонового изображения

    Думаю не для кого не секрет, что в CSS3 появилась возможность использования линейных и радиальных градиентов в качестве фонового изображения.

    Пусть это поддерживается пока, не всеми браузерами (угадайте кто на этот раз отличился), но информацию о их использовании вы можете найти в соответствующих статьях

    • CSS3 линейные градиенты (ссылка появится позже)
    • CSS3 радиальные градиенты (ссылка появится позже)
    1. Писать каждую пару свойств и его значение

    Либо воспользоваться краткой записью

    Как видите, второй способ займет у вас меньше места и сократит время его написания, да и браузер подгрузит такой код быстрее.

    Урок 3: Цвет и фон в CSS

    Этот урок мы посвятим такому важному моменту как цвет и фон в CSS . Вы увидите, как прикольно, и насколько эффективнее чем в html, все это работает!

    Запомни: цвета в CSS указываются так же, как и в html. Т.е. можно указывать шестнадцатиричное значение, например #ff3355, либо же название цвета (red, green, blue и др.)

    Основными свойствами цвета и фона в CSS являются:

    А теперь подробнее, и по-порядку:

    Свойство COLOR

    Задает основной цвет(цвет переднего плана) того или иного элемента. Например, если мы хотим сделать цвет всех заголовков первого уровня красным, а цвет текста параграфов зеленым, то таблица стилей будет выглядеть так:

    H1 <
    color: red ;
    >
    P
    <
    color: green ;
    >

    Для удобства восприятия я выделил свойства и их значения разными цветами.

    Свойство BACKGROUND-COLOR

    Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы(т.е. имеющих атрибут bgcolor ) в CSS , фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить что нам нужно.

    Ну вот например, чтобы изменить фоновый цвет всей страницы, нужно задать это свойство элементу BODY — т.к. именно он отвечает за тело документа , т.е. за всю страницу.

    BODY <
    background-color : #FFEE8C ;
    >
    H1 <
    color: red ;
    background-color : blue ;
    >
    P
    <
    color: green ;
    >

    Точно так же, можно было бы задать фоновый цвет и для параграфов. Для закрепления материала попробуйте поэкспериментировать.

    ↑ Наверх ↑

    Свойство BACKGROUND-IMAGE


    Данное свойство используется для задания фонового изображения. В примере ниже, я укажу фоновое изображения для всей страницы, т.е. для элемента BODY.

    BODY <
    background-color : #FFEE8C ;
    background-image : url(smile.png) ;
    >
    H1 <
    color: red ;
    background-color :blue ;
    >
    P
    <
    color: green ;
    >

    Как видите, в качестве значения свойства, указывается путь к изображению, но немного не так как в html. В начале пишется URL а затем сразу, Без пробелов. в круглых скобках положение картинки. Если она находится в той же папке, то пишем просто название картинки, как в примере выше. Если допустим в подпапке img , то пишем так url(img/smile.png) , ну Вы поняли.

    Фоновое изображение в CSS можно задавать для любого элемента, не только для таблиц и всей страницы. Вверху, две картинки смайлика — большая и маленькая. Попробуйте сохранить их себе на компьютер и потренироваться. Большой смайлик поставьте на фон всей страницы, а маленький — на фон заголовков первого уровня.

    Кто не знает, чтобы сохранить изображение просто наведите на него указатель, клацните правой кнопкой и выберите «Сохранить рисунок».

    ↑ Наверх ↑

    Свойство BACKGROUND-REPEAT

    Вы наверное заметили, что фоновое изображение по-умолчанию повторяется начиная с верхнего левого угла, как по вертикали , так и по горизонтали, , пока не заполнит весь экран. Так вот, с помощью свойства background-repeat мы можем контролировать эти повторения.
    Это свойство может принимать четыре значения:

    Background-repeat: repeat-x ; повторение по горизонтали Смотри пример
    Background-repeat: repeat- y ; повторение по вертикали Смотри пример
    Background-repeat: repeat ; по вертикали и по горизонтали (значение по-умолчанию) Смотри пример
    Background-repeat: no-repeat ; не повторяется Смотри пример

    Это очень полезное свойство, и аналогов ему в html нет.

    Пример записи стиля:

    BODY <
    background-image : url(smile.png) ;
    background-repeat: repeat-x;
    >

    Если вы вообще не укажете это свойство, то будет использоваться его значение по умолчанию, т.е. фоновое изображение будет повторяться как по вертикали, так и по горизонтали.

    ↑ Наверх ↑

    Свойство BACKGROUND-ATTACHMENT

    При наличии фонового рисунка, это свойство устанавливает, будет ли фоновое изображение прокручиваться с содержимым страницы, или будет заблокировано, т.е. неподвижно. Может принимать два значения:
    SCROLL
    — фон прокручивается вместе с содержимым;
    FIXED — фон строго зафиксирован.

    BODY <
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-attachment: scroll ;
    >

    BODY <
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-attachment: fixed ;
    >

    Значение по умолчанию — scroll , т.е. если вообще не писать это свойство, то фон будет прокручиваться вместе с содержимым, как в первом примере.

    Ну как разобрались? здесь нет ничего сложного, экспериментируйте. Попробуйте сделать так, чтобы фон например размножался по вертикали, и был строго зафиксирован.

    ↑ Наверх ↑

    Свойство BACKGROUND-POSITION

    Задает позицию фонового изображения. Значения можно задавать в процентах, в единицах длины и при помощи ключевых слов. Отсчет как обычно ведется из левого верхнего угла браузера, где и располагается фоновое изображение по умолчанию. На рисунке приведены примеры позиционирования(точка это типа изображение, а то что под ней — приблизительные координаты)

    В начале указываем координату по горизонтали (по оси Х), затем через пробел координату по вертикали (по оси Y ). Координату можно задавать в процентах от ширины окна браузера, также в пикселях. Можно задавать и в сантиметрах, но не советую.

    Также положение можно задавать специальными словами:
    left — лево, right — право, center -центр, top — верх, bottom — низ . Смотрите рисунок:

    BODY <
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-position : top right ;
    >

    BODY <
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-position: 300px 500px ;
    >

    BODY <
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-position: 75% 25% ;
    >

    ↑ Наверх ↑


    Сокращенная форма записи — BACKGROUND

    Свойство BACKGROUND служит для сокращенной записи всех выше расмотренных свойств.

    Порядок свойств этого элемента таков:

    background-color _ background-image _ background-repeat _ background-attachment _ background-position

    Т.е. просто записывается пять значений свойств через пробел.Рассмотрев пример ниже Вам станет все понятно:

    То что записано так:

    BODY <
    background-color:#ffee8c ;
    background-image : url(smile.png) ;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;
    >

    Можно записать одной строчкой:

    BODY <
    background: #ffee8c url(smile.png) no-repeat fixed top right ;
    >

    Как видите, пишем значения свойств через пробел. Если какое либо свойство не указать, то ему автоматически присвоится значение по- умолчанию.

    Ничего сложного здесь нет. Попрактикуйтесь, и Вы все запомните!

    Урок 8. Как установить цвет текста и фон элемента в CSS?

    Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color — цвет текста, background — работа с фоном, цвет или изображение.

    Работа со цветом теста в CSS

    color — это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

    Теперь применяем свойство:

    Пример указания цвета для текста в элементе с идентификатором content:

    Почему именно такой пример: указание цвета для ссылки и для текста — это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

    Работа с фоном в CSS

    background — это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

    background-color — это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

    Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):

    background-image — это свойство, которое используется для установки какого-либо изображения в качестве фона в элементе. Для указания изображения достаточно параметра url и пути к изображению относительно файла с css-стилями.

    background-repeat — может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или вообще не повторялось вообще — no-repeat.

    background-attachment — фиксирует фон в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию стоит значение scroll, что не фиксирует положение фона.

    background-position — свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

    В комментарии думаю всё понятно)
    Пример написания цифирного значения:

    Тут думаю тоже всё должно быть понятно.
    Много свойств? Смотрим как писать сокращённо.

    В итоге. Сокращённая запись background в CSS

    Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

    Внимание! Порядок важен. Указывая значения, следите за последовательностью их расположения как в примере.

    О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
    Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

    Пример работы фонов background в CSS

    Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

    В случае с фоновым изображением лучше указывать размеры блока, так как иначе он примет размер согласно содержимому.
    Демонстрация Скачать исходники
    Спасибо за внимание!

    CSS-фон

    Фон на веб-странице — это очень важно, поэтому для него предусмотрено немало свойств. Все они начинаются словом «Background». В переводе с английского «Background» и означает «Фон». О правилах оформления фона через CSS и пойдёт речь в статье.

    background-color

    Мы уже говорили о свойстве color, которое позволяет задать цвет переднего плана элемента, то есть букв текста. background-color устанавливает задний фон любого HTML-элемента: таблицы, абзаца, списка и т. д.

    Например, цвет фона всей страницы можно настроить так:

    background-image

    Устанавливает в качестве фона картинку. Если изображение подобрано правильно, то страница на его фоне будет выглядеть гораздо красивее, чем на фоне одноцветном.

    Например, картинка background.png хранится в той же папке, что и веб-страница, и вы хотите установить её как фон параграфам этого HTML-документа. Код будет таким:

    Для одного и того же веб-элемента можно установить несколько фоновых рисунков. Для этого достаточно перечислить их все в свойстве background-image через запятую:

    Очевидно, что без определённого позиционирования выбранные рисунки при отображении будут накладываться друг на друга, причём первое из перечисленных будет самым верхним, последнее — под всеми, задним фоном.

    background-repeat

    По умолчанию фоновое изображение, если его размер меньше размера элемента, будет заполнять объект полностью, повторяясь с левого верхнего к правому нижнему углу.

    Бывают ситуации, когда такое заполнение неприемлемо. Как раз для них и существует свойство background-repeat, которому можно указать следующие значения:

    • repeat. Задано по умолчанию. Результат вы видели на рисунке выше.
    • repeat-x. Картинка будет повторяться только слева направо, по горизонтали. По вертикали не будет, так что заполнит только первый слой.
    • repeat-y. Рисунок будет повторяться по вертикали, но не по горизонтали, то есть идти вдоль левой границы страницы.
    • no-repeat. Фон не будет повторяться вообще.

    background-position

    Позволяет задать позицию фоновому изображению, ведь не всегда нужно, чтобы оно отображалось с левого верхнего угла окна браузера. Для позиционирования достаточно указать два значения через пробел: координату по оси X (горизонтальное позиционирование) и координату по оси Y (позиционирование вертикальное). Задавать их можно в любых единицах длины, но для абсолютных значений рекомендуется использовать пиксели (px), а для относительных — проценты (%).

    Также картинку можно позиционировать зарезервированными словами.

    • Для горизонтального расположения используются слова left, center и right (по левому краю, по центру и по правому краю соответственно).
    • По вертикали положение задают значения top, center и bottom — позиционирование сверху, по центру и снизу.

    Свойство background-repeat позволяет устанавливать в качестве фона несколько картинок и задавать правила так, чтобы изображения не накладывались друг на друга. Чтобы это сделать, достаточно перечислить пары координат для всех фоновых рисунков в одном правиле. Например, позиционировать три картинки можно так:

    background-attachment

    Определяет, будет ли фоновая картинка прокручиваться вместе с содержимым страницы или будет оставаться неподвижной. Значения могут быть такими:

    • fixed — фон зафиксирован.
    • scroll — фон разблокирован (прокручивается)
    • local — рисунок прокручивается только с содержимым элемента, но дальше, если элемент уже закончился, не идёт.

    Если изображений несколько, для них можно указать правила, перечислив их в одном свойстве background-attachment через запятую:

    background-clip

    Определяет, как фоновое изображение или цвет фона будут выводиться относительно границ элемента.

    • content-box — фон отображается только под содержимым.
    • border-box — выводится и под контентом, и под границами.
    • padding-box — отображается внутри границ.

    background-origin

    То же, что и background-clip, с такими же значениями, только задаёт положение относительно границ не текущего элемента, а элемента-родителя.

    • content-box — фон располагается относительно контента родительского элемента.
    • border-box — фон позиционируется относительно границы родителя, при этом рамки могут фон перекрывать.
    • padding-box — фон отображается до границ элемента-родителя, при этом границы на него не заходят.

    background-size

    Свойство указывает браузеру размеры фонового изображения. Вы можете задать их в любых единицах длины (через пробел указывается сначала ширина, потом высота картинки). Если прописано только одно значение, то оно определит ширину, высота при этом останется исходной, то есть такой, как в файле изображения. Чтобы указать только высоту, а ширину оставить оригинальной, свойству background-size нужно задать значения auto размер (например, background-size: auto 300px).

    В правиле можно использовать ещё два значения.

    • cover. Масштабирует фон по размерам блока с сохранением исходных пропорций картинки, то есть рисунок не растянется и не станет слишком узким.
    • contain. Помещает изображение внутрь блока, сохраняет пропорции.

    background

    Позволяет объединить значения перечисленных свойств в одной строке:

    В примере между свойствами background-position и background-size стоит слеш (/), которым их значения друг от друга необходимо отделять, дабы не запутывать браузер.

    Полезные ссылки:

    • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
    • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
    • Вёрстка сайта с нуля 2.0 — полноценный платный курс.
Добавить комментарий