базовый курс

ГРУППА КУРСА

Фон блока в CSS

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

Цвет фона блока

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

background-color: transparent - прозрачный фон (по умолчанию)

background-color: inherit - значение принимается от родительского элемента

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

Создадим блок, зададим ему размеры и установим цвет фона.

Стиль:

+
1
2
3
4
5
6
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
<style>
7
8
9
10
11
12
#div1
  {
  width: 300px;
  height: 50px;
  background-color: Green;
  }

HTML код:

16
<div id="div1">Блок с фоном</div>

Область заполнения фона

Фон может зополнять разные области блока. Область задаётся с помощью свойства background-clip. Оно принимает следующие значения:

background-clip: border-box - весь блок вместе с рамкой (по умолчанию)

background-clip: padding-box - весь блок без рамки

background-clip: content-box - фон заполняет только область содержимого

border-box
padding-box
content-box

При значении border-box заполняются только прозрачные части рамки. Если рамка сплошная и непрозрачная, то за ней фон не отображается.

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

Стиль:

13
14
15
16
17
18
19
#div2
  {
  background-clip: content-box;
  background-color: Green;
  border: 1px solid Red
  padding: 10px;
  }

HTML код:

24
<div id="div2">Фон заполняет только контент</div>

Фон в виде картинки

В CSS есть возможность использовать в качестве фона картинку. Для этого есть свойство background-image. Значением этого свойства является путь к файлу картинки. Он указывается так:

background-image: url("путь к файлу");

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

Добавим блок с размерами 400 на 250, чуть меньше, чем изображение. И установим фон в виде картинки:

Стиль:

20
21
22
23
24
25
#div3
  {
  width: 400px;
  height: 250px;
  background-image: url("image.jpg");
  }

HTML код:

31
<div id="div3"></div>

Не забывайте, что так устанавливается именно фон блока. На нём можно разместить контент.

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

В прошлом примере виден левый верхний угол изображения. При этом картинка оказалась обрезанной справа и снизу из-за того, что блок меньше изображения. Существует возможность расположить изображение по-другому, чтобы были видны другие части. Для этого используется позиционирование. Его устанавливает свойство background-position. Значением свойства являются два слова, перечисленных через пробел. Первое слово - это горизонтальное позиционирование. Значение может быть left, center или right. Второе слово - это вертикальное позиционирование. Значение может быть top, center или bottom.

Расположим изображение в созданном блоке справа сверху. Для этого селектору #div3 добавим свойство background-position.

25
background-position: right top;

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

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

Стиль:

27
28
29
30
31
32
33
#div4
  {
  width: 1100px;
  height: 800px;
  border: 1px solid Red;
  background-image: url("image.jpg");
  }

HTML код:

40
<div id="div4"></div>

Чтобы изменить повторение изображения, используется свойство background-repeat. Оно принимает такие значения:

background-repeat: repeat - повторяется по горизонтали и по вертикали (по умолчанию)

background-repeat: repeat-x - повторяется только по горизонтали

background-repeat: repeat-y - повторяется только по вертикали

background-repeat: no-repeat - не повторяется

background-repeat: inherit - значение принимается от родительского элемента

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

33
background-repeat: no-repeat;

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

Попробуйте разные способы повторения изображения.

Прокрутка фона

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

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

background-attachment: fixed - фон зафиксирован относительно левого верхнего угла окна браузера

background-attachment: local - фон движется вместе с содержимым при прокрутке блока

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

Стиль:

35
36
37
38
39
40
41
42
#div5
  {
  width: 500px;
  height: 450px;
  background-image: url("image.jpg");
  overflow: auto;
  background-attachment: local;
  }

HTML код:

46
47
48
<div id="div5">
<div style="height: 800px; width: 10px; border: 1px solid Red"></div>
</div>

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