Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS Урок 5 Фон


« Назад Далее »

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

Свойства CSS, используемые для установки фона:

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

Цвет Фона

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

Цвет фона страницы определяется селектором body:

Пример

background-color:#b0c4de;

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

В CSS цвет чаще всего указывается с помощью:

  • шестнадцатеричного (HEX) значения - например "#ff0000"
  • RGB значения - например "rgb(255,0,0)"
  • имени цвета - например "red"

Зайдите в справочник CSS Значений Цветов, чтобы посмотреть полный список допустимых значений цветов.

В примере ниже, элементы h1, p, и div имеют различные фоновые цвета:

Пример

h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


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

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

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

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

Пример

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

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

Пример

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

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Фоновое Изображение - Повторение по Горизонтали или по Вертикали

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

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

Пример

body
{
background-image:url('gradient2.png');
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

Пример

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Фоновое Изображение - Установка положения картинки и запрет повторения

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

Вывод изображения один единственный раз (без повторения) устанавливается с помощью свойства background-repeat:

Пример

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

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

Положение картинки указывается с помощью свойства background-position:

Пример

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает


Фоновое Изображение - Стенографическое свойство

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

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

Стенографическое свойство для фона - это просто "background":

Пример

body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

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

  • background-color (цвет фона)
  • background-image (фоновое изображение)
  • background-repeat (повторение)
  • background-attachment (пристыковка)
  • background-position (положение)

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

Этот пример использует более продвинутый CSS. Посмотрите: Продвинутый пример


Примеры

Еще примеры

Как установить фиксированное фоновое изображение
Этот пример демонстрирует как установить фиксированное фоновое изображение. Это изображение не будет прокручиваться вместе со страницей.


Все Фоновые Свойства CSS

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




« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru