Основные свойства фона CSS и работа с ними

Цель урока: Знакомство со свойствами фона css и приобретение навыков работы с ними

К оглавлению

Содержание:

Свойства фона CSS
Краткая запись background

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

Перечислим основные свойства для стилизации фона и их значения

background-color (цвет фона)

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

red (название)
rgb(255,0,0) (код RGB)
#ff0000 (шестнадцатиричный код)
transparent (прозрачность)

Пример:

h5{background-color:#ff0000}
p{background-color:rgb(0,100,0)}

Результат:

Это пример параграфа

Это пример заголовка

background-image (фоновое изображение)

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

url('...') (url-адрес)
none (без фонового изображения)

Изображение тиражируется по всему экрану.
Пример:

p{background-image:url('https://labs-org.ru/wp-content/uploads/2016/05/logo.png')}

Результат:

background-repeat (повторение фона)

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

repeat-x (Фоновый рисунок повторяется только по горизонтали)
repeat-y (Фоновый рисунок повторяется только по вертикали)
no-repeat (изображение без повторений)

Пример:

p{background-image:url('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
background-repeat:repeat-y}

Результат:

Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа. Это пример параграфа.

background-position (позиционирование фона)

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

xpos ypos (координаты)
left top (по левому и верхнему краю)
left center (слева и по центру)
left bottom (слева и по нижнему краю)
right top (справа и по верхнему краю)
right center (справа и по центру)
right bottom (справа и по нижнему краю)
center top (центр по горизонтали и верхний край)
center center (центр по горизонтали и по вертикали)
center bottom (центр по горизонтали и нижний край)

Пример:

p{
  background-image:url('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
  background-repeat:no-repeat;
  background-position:right top;
}

Результат:

background-attachment (прокрутка фона)

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

scroll (прокрутка вместе с содержимым)
fixed (делает изображение неподвижным)

Пример:

textarea{
background-image:url('https://labs-org.ru/wp-content/uploads/2016/05/logo.png');
background-attachment:fixed
}

Результат:

Краткая запись background

Свойства фона задаются в следующем порядке:

элемент {background-color  background-image  background-repeat  background-attachment background-position}

Пример:

body{background:#fff url('1,gif') no-repeat right top;}

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

К оглавлению