HTML-верстка: инструменты и приемы профессиональной front-end разработки

Фон в CSS


назад вперед

Фон в CSS

Свойство CSS background используется для форматирования фона элементов html.

Вы можете изменять следующие свойства CSS:


Цвет фона

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

Фон страницы указывается в селекторе body:

Пример

body {background-color:#b0c4de;}

Цвет фона может быть указан с помощью:

В примере ниже элементы 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('gradient2.png');
background-repeat:repeat-x;
}

Для того, чтобы повторять изображение по вертикали, надо заменить значение repeat-x на repeat-y.


Позиционирование фонового изображения и отмена повторения

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

Для того, чтобы фоновое изображение отображалось только один раз, значение свойства 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;
}


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

Для сокращения кода css вы можете записать все свойства фона одной записью. Все значения фона, записываются в одном свойстве, называемом "background":

Пример

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

При краткой записи соблюдайте порядок указания свойств:

Если вы не укажете какое-либо из свойств, будет подставлено значение по умолчанию.


Все свойства фона — справка CSS

Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
background Все свойства фона одной записью background-color
background-image
background-repeat background-attachment background-position
inherit
1
background-attachment Указывает на то, должно ли фоновое изображение прокручиваться вместе с содержимым страницы или нет scroll
fixed
inherit
1
background-color Фоновый цвет элемента color-rgb
color-hex
color-name
transparent
inherit
1
background-image Фоновое изображение элемента url(URL)
none
inherit
1
background-position Стартовая позиция элемента left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
inherit
1
background-repeat Повтор фонового изображения repeat
repeat-x
repeat-y
no-repeat
inherit
1


Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта