Как сделать фон в css

Обновлено: 06.07.2024

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

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

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

Добавление фонового изображения

Следующие правила добавляют цвет фона и фоновое изображение к элементу . Затем мы задаем для элемента

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

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

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

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

Повтор фонового изображения

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

  • no-repeat - фоновое изображение не повторяется
  • repeat-x - повторяет фоновое изображение только по горизонтали
  • repeat-y - повторяет фоновое изображение по вертикали
  • repeat - фоновое изображение занимает все доступное пространство повторяясь по горизонтали и вертикали (является значением по умолчанию)

Позиционирование фонового изображения

По умолчанию фоновое изображение располагается в верхнем левом углу окна браузера или элемента-контейнера. Если фоновое изображение не повторяется (background-repeat: no-repeat;) или должно повторяться с определенного места, то можно использовать свойство background-position, чтобы указать в каком месте окна браузера или элемента оно должно быть размещено. Это свойство обычно принимает два значения, разделяемые пробелом. Первое значение - положение по горизонтали, второе - по вертикали.

Свойство background-position может принимать в качестве значений ключевые слова: left, top, center, right и bottom. Вы можете использовать любую комбинацию ключевых слов:

  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right

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

это то же самое что и:

Вы также можете использовать в качестве значений пиксели или проценты. Они определяют расстояние от верхнего левого угла окна браузера (или элемента-контейнера). Верхний левый угол соответствует значению 0% 0%.

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

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

Так как по умолчанию задний фон прокручивается вместе с содержимым, то в качестве примера мы зафиксируем наше фоновое изображение на одном месте с помощью значения fixed:

Объединение свойств

Можно получить тот же самый результат, что и в предыдущем примере, но с меньшим количеством строк кода. Для этого используется свойство background, которое позволяет установить значения свойств background-color, background-image, background-repeat, background-attachment, и background-position в объявлении всего одного свойства:

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

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

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

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

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

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

Давайте зальем блок зеленым фоном (цвет текста при этом сделаем белым):

Так код будет выглядеть в браузере:

Блок . Свойство background-image

Свойство background-image задает фоновую картинку. Делается это следующим образом: background-image: url("путь к картинке").

Путь к картинке обычно берут в кавычки (двойные или одинарные), но можно также и без них.

Давайте в качестве фона блоку зададим следующую картинку:

Картинка смайла для фона.

Смотрите, что у нас получится - наша картинка размножится по всему блоку, замостит его:

Так код будет выглядеть в браузере:

Блок . Свойство background-repeat

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

Оно позволяет делать следующее: если задать значение no-repeat, то картинка вообще не будет повторяться, если задать значение repeat-x - будет повторяться по оси X (то есть по горизонтали), а если repeat-y - картинка будет повторяться по оси Y (по вертикали).

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

Давайте посмотрим, как работает это свойство.

Значение no-repeat

Давайте свойству background-repeat зададим значение no-repeat - в этом случае картинка не будет повторяться вообще и станет в верхний левый угол:

Так код будет выглядеть в браузере:

Значение repeat-x

А теперь зададим значение repeat-x - фоновая картинка станет повторяться по горизонтали:

Так код будет выглядеть в браузере:

Значение repeat-y

Ну, а теперь сделаем так, чтобы картинка повторялась по вертикали, задав свойству background-repeat значение repeat-y:

Так код будет выглядеть в браузере:

Блок . Свойство background-position

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

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

Сдвиг фона ключевыми словами

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

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

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

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

Поставим для свойства background-position значение right bottom - правый нижний угол:

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

Синтаксис

= [background-attachment || background-image || background-position || background-repeat] | inherit

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

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

Значения

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

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

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

Вид фона и фонового рисунка в блоке фиксированного размера

Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера

HTML5 CSS3 IE Cr Op Sa Fx

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

[window.]document.getElementById(" elementID ").style.background

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Свойства фона CSS используются для определения фоновых эффектов для элементов.

Свойства фона CSS:

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

Цвет фона

Свойство background-color задает цвет фона элемента.

Цвет фона страницы задается так:

Пример

С помощью CSS цвет чаще всего задается:

Посмотрите на значения цвета CSS для полного списка возможных значений цвета.

В приведенном ниже примере элементы

Пример

div background-color: lightblue;
>

p background-color: yellow;
>

Фоновое изображение

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

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

Фоновое изображение для страницы можно задать так:

Пример

Ниже приведен пример плохого сочетания текста и фонового изображения. Текст вряд ли читается:

Пример

Примечание: При использовании фонового изображения используйте изображение, которое не нарушает текст.

Фоновое изображение-повторить горизонтально или вертикально

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

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

Пример

Если изображение выше повторяется только горизонтально ( background-repeat: repeat-x; ), фон будет выглядеть лучше:

Пример

Совет: Чтобы повторить изображение вертикально, установите background-repeat: repeat-y;

Фоновое изображение-установить положение и не повторять

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

Пример

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

Положение изображения задается свойством background-position :

Пример

body <
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
>

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

Чтобы указать, что фоновое изображение должно быть исправлено (не будет прокручиваться вместе с остальной частью страницы), используйте свойство background-attachment :

Пример

body <
background-image: url("img_tree.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
>

Фон-Сокращенное свойство

Чтобы сократить код, можно также указать все свойства фона в одном свойстве. Это называется сокращенным свойством.

Сокращенное свойство для фона — background :

Пример

При использовании сокращенного свойства порядок значений свойств:

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

Это не имеет значения, если одно из значений свойства отсутствует, до тех пор, пока другие из них в этом порядке.

Читайте также: