CSS Фоны

Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

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

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

background-color - цвет
background-image - изображение
background-repeat - повторение
background-attachment - прикрепление
background-position - позиция

CSS background-color. Цвет фона

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

Пример

Цвет фона страницы устанавливается следующим образом:

body {
background-color: lightblue;
}

Попробуйте сами »

В CSS цвет чаще всего определяется как:

правильное название цвета - например "red" (красный)
Значение HEX - например "#ff0000"
Значение RGB - например "rgb(255,0,0)"

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

Например

Здесь <h1>, <p> и <div> элементы будут иметь различные цвета фона:

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

Попробуйте сами »

CSS background-image. Изображение фона

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

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

Пример

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

body {
background-image: url("paper.gif");
}

Попробуйте сами »

Пример

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

body {
background-image: url("bgdesert.jpg");
}

Попробуйте сами »

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

CSS background-repeat. Повторение изображения

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

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

Пример

body {
background-image: url("gradient_bg.png");
}

Попробуйте сами »

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

Пример

body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}

Попробуйте сами »

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

CSS background-repeat: no-repeat. Фоновое изображение без повторения

Как же сделать так, чтобы фоновое изображение повторялось на веб-странице только один раз?

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

Пример

Отображать фоновое изображение только один раз:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

Попробуйте сами »

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

CSS background-position. Позиция (расположение) изображения

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

Пример

Расположите фоновое изображение в правом верхнем углу:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

Попробуйте сами »

CSS background-attachment. Прикрепление (фиксация) изображения

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

Пример

Укажите, что фоновое изображение должно быть зафиксировано:

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
background-attachment: fixed;
}

Попробуйте сами »

Пример

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

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
background-attachment: scroll;
}

Попробуйте сами »

CSS background - Shorthand property. Сокращенное свойство

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

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

Пример

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

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

Попробуйте сами »

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

background-color - цвет фона
background-image - изображение фона
background-repeat - повторение фона
background-attachment - прикрепление фона
background-position - позиция фона

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

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »

Все свойства CSS Background

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

W3Schools на русском уроки для начинающих по CSS CSS3 для новичков основы языка CSS курсы с нуля язык css как сделать фон в css цвет фона на веб-страницах background color свойства каскадных таблиц стилей css

❮ Prev Next ❯