Цикл статей «CSS учебник».
Следующая статья — «CSS текст».
Предыдущая статья — «CSS цвет».
Для оформления фона в CSS есть шесть свойств:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background
background-color
Свойство background-color позволяет устанавливать цвет фона элементов. Пример использования:
1 2 3 |
p { background-color : #f0f0f0; } |
В примере выше устанавливается серый цвет фона для элементов p.
Более подробное описание свойства background-color.
background-image
Свойство background-image позволяет указывать фоновое изображение для элемента. Рекомендуется также указывать и цвет фона background-color, который будет отображаться во время загрузки изображения и в случае отключённого показа картинок в браузере.
Пример:
1 2 3 |
body { background-image: url("images/mybackground.png"); } |
Более подробное описание свойства background-image.
background-repeat
По умолчанию фоновое изображение, указанное с помощью свойства background-image, повторяется по горизонтали и по вертикали до тех пор, пока не покроет всю область. Свойство background-repeat позволяет изменить это поведение. Возможные значения: repeat (по умолчанию), repeat-x, repeat-y, no-repeat.
Пример:
1 2 3 4 |
body { background-image : url(myimage.png); background-repeat : repeat-x; } |
Более подробное описание свойства background-repeat.
background-attachment
Фоновое изображение может прокручиваться вместе с содержимым ( scroll), либо оставаться на месте при прокручивании ( fixed).
Пример:
1 2 3 4 |
body { background-image : url("images/mybackgroundimg.png"); background-attachment : fixed; } |
Более подробное описание свойства background-attachment.
background-position
Позволяет сместить начало изображения. Можно указать количество пикселей, дюймов, размер, проценты, left, center, top, bottom. Указывается два значения: по горизонтали и по вертикали.
Пример:
1 2 3 4 |
body { background-image : url("image/background.png"); background-position : 10px 13px; } |
Более подробное описание свойства background-position.
background
Позволяет указать от одного до пяти любых свойств из описанных выше в любом порядке. Браузер сам определит, к какому свойству относится значение.
Пример:
1 2 3 |
body { background : url("images/mybackground.png") fixed 12px 8px #f0f0f0; } |
Более подробное описание свойства background.
Цикл статей «CSS учебник».
Следующая статья — «CSS текст».
Предыдущая статья — «CSS цвет».