Background-attachment

Background-repeat

Background-image

Задает графическое фоновое изображение элемента. Вообще если указывается фоновое изображение, то рекомендуется указывать и фоновый цвет, потому что рисунок может не загрузиться или пользователь отключит загрузку изображений. В этом случае текст может плохо читаться на фоне по умолчанию, так что лучше указывать приемлемый фон явно. Естественно, если устанавливать фоновое изображение для таблицы, то CSS не дает никаких преимуществ, однако с помощью CSS можно задать его для любого элемента.

HTML (112 знаков)	CSS (89 знаков)
Белый текст на фоновом рисунке	P { background-image: url(img/bg.gif); color: #FFF}... Белый текст на фоновом рисунке

Если задано фоновое изображение, то определяет, будет ли повторяться это фоновое изображение и, если будет, то каким образом.

Значения:

• repeat: изображение повторяется по горизонтали и по вертикали
• repeat-x: изображение повторяется только по горизонтали
• repeat-y: изображение повторяется только по вертикали
• no-repeat: изображение не повторяется

В HTML подобного атрибута нет вообще, а по умолчанию изображение повторяется и по горизонтали, и по вертикали, так что работать с фоном только средствами HTML очень сложно.

Часто кодеры поступают следующим образом. Если надо, скажем, чтобы изображение не повторялось вообще, то делают рисунок таких размеров, чтобы его повторение не было заметно на любых мониторах. Это примерно 1600ґ1200 пикселей. Сами понимаете, что решение это корявое (увеличивается вес рисунка), но единственно возможное средствами HTML. С помощью CSS проблема решатся изящно и легко.

BODY {
background-image: url(img/bg.gif);
background-repeat: no-repeat}
...
Содержимое страницы на фоновом неповторяющемся рисунке

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

Значения:

• fixed: фон будет оставаться неподвижным, а содержимое страницы будет перемещаться относительно него
• scroll: фон будет перемещаться вместе с остальным содержимым. Значение по умолчанию.

В HTML нет атрибута, равнозначного данному свойству, а по умолчанию любой фон перемещается при скроллировании, то есть имеет значение scroll.

P {
background-image: url(img/bg.gif);
background-repeat: no-repeat;
background-attachment: fixed}
...

Текст на фоновом неповторяющемся и неподвижном рисунке

Дата добавления: 2015-06-27