CSS свойство Background


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

CSS свойства фона.

Свойство background-color определяет цвет фона.

transparent — прозрачный фон.

#0f0f0f — значение цвета.

Свойство background-image определяет фоновый картинку.

none — без картинки.

URL — ссылка на файл.

Свойство background-repeat определяет , будет ли повторяться фоновая картинка.

no-repeat — без повторений.

repeat — с повторениями.

repeat-х — повторяет только по горизонтали.

repeat-y — повторяет только по вертикали.

Свойство background-position определяет , начальное положение фоновой картинки.

В качестве значений выступают два числа, причем первое задает смещение по горизонтали, второе – по вертикали.

num num — смещение по горизонтали и по вертикали.

top — фоновая картинка вверху.

left — фоновая картинка слева.

center — фоновая картинка по центру.

right — фоновая картинка справа.

bottom — фоновая картинка внизу.

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

scroll — будет прокручиваться.

fixed — не будет прокручиваться.

Свойство background одновременно задает несколько свойств.

Фон в 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 служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

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

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

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

p <
background-color:#000000;
color:#ffffff
>

У этого абзаца черный фон и белый текст

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

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

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка 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:

Горизонтальная позиция может принимать следующие значения:


В качестве числовых значений могут использоваться как абсолютные (например 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% (по правому нижнему углу)
Топ-пост этого месяца:  Как обрабатывать внешние http запросы

На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по 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 нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

CSS свойство background

Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию. Позволяет установить одновременно до пяти атрибутов стиля фона – background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment. Одновременно допустимо определять любые атрибуты.

CSS синтаксис

Возможные значения

Значение Описание
background-color Устанавливает цвет фона.
background-image Устанавливает фоновое изображение.
background-position Устанавливает положение фонового изображения.
background-size Устанавливает размер фонового изображения.
background-repeat Определяет, как будет повторяться фоновое изображение.
background-origin Устанавливает область позиционирования фонового изображения.
background-clip Устанавливает область прорисовки фонового изображения.
background-attachment Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Если среди параметров присутствует декларация размера bg-size, то он должен быть отделен от параметра позиции bg-position при помощи слэша (/), например, background:url(smiley.gif) 10px 20px/50px 50px; задает фоновое изображение, расположенное в позиции 10 пикселей от левого края, 20 пикселей от верхнего края, и размер изображения будет 50х50 пикселей.

Если устанавливается несколько фоновых изображений, но при этом нужно еще установить и фоновый цвет, то параметр background-color должен быть последним в списке.

Фон для сайта (свойство CSS background)

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

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

Background-color

Задает цвет фона. Можно применять к отдельным элементам

или ко всему сайту через через тэг :

/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1

Background-image

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

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

Background-size

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

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

Background-repeat

Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:

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

background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:

  • background-attachment: scroll — прокручивается вместе со страницей
  • background-attachment: fixed — при прокрутке фон остается неподвижным

Background-position

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

  • в фиксированных единицах (пикселы, сантиметры)
  • в процентах
  • словесно: — top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
  • background-position: 20px 50px — изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
  • background-position: 50% 25% — расположено по центру по горизонтали и отступает на 25% сверху.
  • background-position: right bottom — рисунок располагается снизу справа.

Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]


background: #000 url(«my-image.jpg») no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!

Повторение Свойств Background в CSS

Russian (Pусский) translation by Andrey Rybin (you can also view the original English article)

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

1. Смещение для Background

Позиционирование фоновой графики — дело простое, и скорее всего вы с ним уже знакомы. Если вы хотите позиционировать фон внизу справа, то мы записываем bottom right для background-position . Например:

Или в случае короткой записи background , пишем после url адреса для фона:

В CSS3 у нас получилась дополнительная возможность задавать смещение при позиционировании; точное расстояние от позиции. Возьмем наш пример с bottom right , мы добавили bottom 20px right 30px , чтобы сместить фоновую картинку на 20px от низа и на 30px от левого края.

Элементы позиционирования ( bottom , top , right , left ) могут быть заданы в другом порядке, но величина смещения должна быть указана, после каждого значения позиции.

2. Использование Нескольких Фоновых Изображений

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

Мы добавим эти объекты одной записью для background или точнее background-image разделив их запятой. Мы используем свойство background-position , которое позволяет использовать несколько значений, и дает возможность позиционировать каждую картинку.

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

Каждая пара параметров координат отсчитывается от верхнего левого угла элемента-контейнера, к верхнему левому углу картинки. Например, верхний левый угол картинки с камерой отстоит на 280рх от верхней части элемента-контейнера, и на 7% допустимой ширины, от левого края.

Примечание: Допустимая ширина это полная ширина элемента-контейнера, минус ширина фонового изображения. Поэтому фоновое изображение с позицией 50% по х, появится как раз в центре!

Движение

Едем дальше, так как свойство background-position имеет возможность задавать анимацию, мы можем сделать наш фон более живым и привлекательным:

Здесь мы устанавливаем число кадров во времени. Для каждого кадра мы задаем background-position-x и background-position-y для каждого изображения. Анимация выглядит простенько, поэтому разверните CodePen и улучшите ее!

Примечание: Нажмите кнопку Rerun в нижнем правом углу, чтобы увидеть анимацию.

Узнайте больше об анимации в CSS

Парочка Моментов Заслуживающих Внимания

Фоновые картинки, которые мы использовали — имеют свою последовательность; первый появляется поверх всех, в то время как последний появляется позади всех.

Все подсвойства свойства background могут повторяться несколько раз ( background-repeat , background-size , background-position и т.д.), за исключением background-color . Если вы используете короткую запись для свойства background , задавайте значение для цвета в самом конце. Например:

Или, добавляйте отдельно background-color , после краткого описания свойств:

Оба варианта работают одинаково, но для себя я решил, что последний более интуитивный и хорошо читаемый.

3. Наложение Фоновых Изображений

Подсвойство background-blend-mode делает тоже самое наложение, которое вы можете найти в таких программах как Photoshop или Gimp; Оно смешивает фоновые изображения одно с другим, ровно как и то, что находится за ними.

background-blend-mode принимает такие же значения как overlay и multiply и ряд других, по поводу чего Jonathan Cutrell сделал фантастическую работу и описал все свойства в уроке. Я настоятельно рекомендую вам с ним ознакомится, а мы перейдем к следующему примеру.

Есть несколько способов использования Режимов Наложения (Смешивания) в CSS, чтобы сделать интересный дизайн, например такой как смешение градиента с изображением, о чем Ian Yetes рассказал в своем вдохновляющем обзоре:

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

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

4. Маска для Background

Свойство background-clip используется, чтобы контролировть, как фон и фоновая картинка буду выводится в пределах границ элемента. Подобно свойству box-sizing , background-clip использует три значения со следующими названиями:

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

Один из практических примеров, использования background-clip , который мне удалось найти, может быть полезен, если мне нужно создать кнопку с иконкой, используя всего один эелмент. В нашем следующем примере, наше изображение, располагается в между левым и правым краем элемента, даже если мы добавим padding к каждой стороне, все равно будет работать свойство border-box .

Если мы захотим сделать вокруг иконки пустое пространство, нам нужно будет поместить этот элемент внутри другого и добавить padding у внешнего элемента. Используя background-clip правильно, мы можем сделать это аккуратно, задав content-box , и подставив padding с границами того же цвета, что и цвет фона.

Заключение

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

Одно замечание под конец: браузеры отлично поддерживают эти свойства (за исключением background-blend-mode ). Согласно CanIUse, несколько фонов поддерживаются уже Explorer 9, с некоторыми небольшими недостатками. Такие элементы свойства как background-clip , также имеют хорошую поддержку.

Blending Modes, на момент написания этой статьи, лучше всего работали в Chrome, Opera, частично работают в Safari с несколькими багами, и к сожалению в Microsoft Edge в этом направлении нет прогресса.

Управление фоном элемента. Свойства группы background

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

Свойство background-color

Каждый элемент на странице может иметь фоновый цвет. Чаще его назначают для блочных элементов, но также он применим и к блочно-строчным, например, к ссылкам со значением свойства display: inline-block , и реже — к строчным элементам, которые нужно выделить на странице цветом:

Для указания цвета может быть использовано 16-ричное значение в виде 3-х или 6 цифр, rgb(), rgba(), hsl(), hsla() или название цвета. В коде приведены разнообразные варианты записи красного цвета, в том числе и с полупрозрачностью:

Вы можете сами посмотреть, как применяется это свойство с разными значениями цвета, причем не только красного.

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

Свойство background-image

Для вставки фонового изображения используйте правило background-image :

Для того чтобы убрать изображение необходимо использовать значение none:

Именно none является значением по умолчанию для свойства background-image , т.к. любой блок не имеет картинки, назначенной ему в качестве фона браузером.

Для фоновых изображений используют обычно файлы в формате JPG, PNG, SVG или GIF. Еще одним редко используемым форматом является APNG, т.е. Animated (анимированный) PNG, просто потому, что изображений в таком формате еще очень мало и они поддерживаются далеко не всеми браузерами (инфо на caniuse.com). Также в сети все больше появляется файлов в формате WEBP, предложенном Google в 2010 году и имеющем пока частичную поддержку браузерами (caniuse.com). Этот формат можно получить с помощью конвертера.

Посмотрите на примере на фоновые изображения в разных форматах:

Свойство background-repeat

Чтобы управлять «распространением» (или клонированием) изображения, можно использовать свойство background-repeat . Оно может замостить изображением-текстурой всю облаcть элемента-контейнера (значение repeat ), повторяться только по горизонтали ( repeat-x ) или по вертикали ( repeat-y ), а также задавать одну не повторяющуюся фоновую картинку (значение no-repeat ). Также в CSS3.0 появились новые значения round и space :

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

В примере ниже вы можете посмотреть все варианты этого свойства на примере бесшовной и обычной текстуры. Бесшовная текстура — это обычно не очень большое по размеру изображение, которое укладываясь плитками по горизонтали и вертикали (значение repeat ), не дает заметных стыков.


Свойство background-position

Также вы можете указать браузеру место, в котором будет расположено изображение. Для этого есть свойство background-position со значениями в виде ключевых слов (left, center, right — по горизонтали, или координате по X, top, center, bottom — для вертикали, или координате по Y), в виде единиц измерения, обычно используемых в css (px, em, ex, pt), или в процентах (%). Но, если вы задаете свойство в %, то должны понимать, что проценты берутся от ширины или высоты того элемента, для которого указывается это свойство. Кроме того, значения в виде ключевых слов и в виде процентов имеют следующую аналогию:

СSS Свойство background-image

Пример

Установите фоновое изображение для элемента :

Пример

Установите фоновое изображение для элемента :

Определение и использование

Свойство background-image задает одно или несколько фоновых изображений для элемента.

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

Совет: элемент background — это общий размер элемента, включая отступ и границу (но не поля).

Совет: Всегда установливать background-color если изображение недоступно.

Значение по умолчанию: none
Унаследованный: нет
Анимируемый: нет. Прочитать о animatable
Версия: CSS1 + новые значения в CSS3
JavaScript синтаксис: object.style.backgroundImage=»url(img_tree.gif)» Редактор кода

Поддержка браузеров

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

Свойство
background-image 1.0 4.0 1.0 1.0 3.5

Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений.

CSS Синтаксис

Значение свойств

Значение Описание
url(‘URL‘) URL-адрес изображения. Чтобы указать несколько изображений, разделите завитки запятой
none Фоновое изображение не отображается.
linear-gradient() Устанавливает линейный градиент в качестве фонового изображения. Определите по крайней мере два цвета (сверху вниз)
radial-gradient() Устанавливает радиальный градиент в качестве фонового изображения. Определите по крайней мере два цвета (от центра к краям)
repeating-linear-gradient() Повторяет линейный градиент
repeating-radial-gradient() Повторяет радиальный градиент
initial Задает этому свойству значение индекса. Прочитать о initial
inherit Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Устанавливает два фоновых изображения для элемента . Пусть первое изображение появляется только один раз (без повтора), и пусть повторяется второе изображение:

Пример

Устанавливает линейный градиент (два цвета) в качестве фонового изображения для элемента

Пример

Устанавливает линейный градиент (три цвета) в качестве фонового изображения для элемента

Пример

Функция repeating-linear-gradient() используется для повторения линейных градиентов:

Пример

Устанавливает радиальный градиент (два цвета) в качестве фонового изображения для элемента

Пример

Устанавливает радиальный градиент (три цвета) в качестве фонового изображения для элемента

Пример

Функция repeating-radial-gradient() используется для повторения радиальных градиентов:

Задание фона с помощью 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. Писать каждую пару свойств и его значение

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

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

CSS свойства фона.

Свойство background-color определяет цвет фона.

transparent — прозрачный фон.

#0f0f0f — значение цвета.

Свойство background-image определяет фоновый картинку.

none — без картинки.

URL — ссылка на файл.

Свойство background-repeat определяет , будет ли повторяться фоновая картинка.

no-repeat — без повторений.

repeat — с повторениями.

repeat-х — повторяет только по горизонтали.

repeat-y — повторяет только по вертикали.

Свойство background-position определяет , начальное положение фоновой картинки.

В качестве значений выступают два числа, причем первое задает смещение по горизонтали, второе – по вертикали.

num num — смещение по горизонтали и по вертикали.

top — фоновая картинка вверху.

left — фоновая картинка слева.

center — фоновая картинка по центру.

right — фоновая картинка справа.

bottom — фоновая картинка внизу.

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

scroll — будет прокручиваться.

fixed — не будет прокручиваться.

Свойство background одновременно задает несколько свойств.

CSS свойство Background

Каждый элемент в DOM-дереве напоминает прямоугольник, который имеет фоновый слой, он может быть либо полностью прозрачным, либо цветным, либо содержать изображение. Этот фоновый слой находится под контролем 8 свойств CSS (плюс 1-го сокращённого свойства).

background-color

Свойство background-color задает цвет фона для элемента. Это значение может быть любым принятым значением цвета, или ключевым словом transparent.

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

background-image

Свойство background-image определяет фоновое изображение (или изображения) для элемента. Это значение обычно представляет собой URL к изображению, определенному в url() нотации. Также может быть использовано значение none, которое будет учитываться в качестве слоя, но пустого.

Мы также можем указать несколько фоновых изображений, отделенных друг от друга запятой. Каждое последующее изображение будет помещается за предыдущим на Z-оси.

. m > <
background — image : url ( ‘khaled.png’ ) , url ( ‘ire.png’ ) ;

/* Other styles */
background — repeat : no — repeat ;
background — size : 100px ;
>

background-repeat

Свойство background-repeat управляет тем как фоновое изображение заполняет пространство, после того как установлен его размер (при помощи свойства background-size (см. ниже)) и расположение (при помощи свойства background-position (см. ниже)).

Значение этого свойства может быть одним из следующих: repeat-x, repeat-y, repeat, space, round, no-repeat. Кроме первых двух (repeat-x и repeat-y), другие значения могут быть определены или один раз, для оси х и оси у, или для каждой оси по отдельности.

background-size

Свойство background-size определяет размер фонового изображения. Это значение может содержать ключевое слово, длину или процент.

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

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

background-attachment

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

Ключевое слово fixed означает, что фоновое изображение фиксируется в видимой области экрана и не двигается, даже когда пользователь прокручивает прокручивает окна. local означает, что фон должен быть закреплен в своем положении в элементе. Если элемент имеет прокрутку и фоновое изображение позиционируется сверху, то при прокрутке элемента вниз, фоновое изображение останется на месте, вне области видимости. И, наконец, scroll означает, что фоновое изображение является фиксированным и не будет прокручиваеться вместе с содержанием элемента.

background-position

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

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

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

background-origin

Свойство background-origin определяет область позиционирования фонового изображения.

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

background-clip

Свойство background-clip определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

background

И, наконец, свойство background является обобщающим для других свойств фона. Порядок подсвойств не имеет значения, так как типы данных для каждого свойства различны. Тем не менее, для background-origin и background-clip, если указано только одно значение, оно используется для обоих свойств. Если два, первое устанавливается для свойства background-origin.

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Топ-пост этого месяца:  Банк United BTC Bank — надёжный банк для современных людей
Добавить комментарий