CSS урок 8. Свойства фона

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

Свойства фона 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('http://labs.org.ru/wp-content/uploads/2016/05/logo.png')}

Результат:

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

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

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

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

Пример:

p{background-image:url('http://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('http://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('http://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;}

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

Поделитесь уроком с коллегами и друзьями:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*

Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить