|
Свойство
Background–attachment
Background–attachment – определяет привязку фона на странице.
Может принимать значения:
scroll – привязывает фон к полосе прокрутки (при прокрутке фон
будет оставаться на месте);
fixed – привязывает фон к виртуальной
оси координат (при прокрутке фон будет прокручиваться вместе со всей
страницей).
Пример с
привязкой фона к полосе прокрутки:
{
background – image : url('images/images.jpg');
background-repeat: no-repeat;
background-attachment: scroll ;
}
нажмите чтобы увидеть результат
Пример с
привязкой фона к виртуальной оси:
{
background – image : url('images/images.jpg');
background-repeat: no-repeat;
background-attachment: fixed ;
}
нажмите чтобы увидеть результат
Фоновое
изображение - установка положения картинки и запрет повторения
Когда вставляете фоновое изображение, не используйте картинку, которая
ухудшает читабельность текста.
Вывод изображения один единственный раз (без повторения) устанавливается с
помощью свойства background-repeat:
Может
принимать следующие значения:
repeat
– тиражирование в обоих направлениях
;
no – repeat
– изображение выводится только один раз;
repeat – x
– тиражирование по горизонтали;
repeat – y
– тиражирование по вертикали.
Пример:
{
background-image:url('images/images.jpg');
background-repeat:no-repeat;
}
нажмите чтобы увидеть результат
Необходимо заметить, что фон в CSS может быть не только у всей страницы, но и у
любого ее элемента.
В примере выше, фоновое изображение показано в том же месте, что и текст. Мы
хотим изменить положение картинки так, чтобы не ухудшать читабельность текста
чересчур. Положение картинки указывается с помощью свойства background-position:
Пример:
{
background-image:url('images/images.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
нажмите чтобы увидеть результат
Свойства background-position
Background–position
– задает начальное положение фонового изображения и может принимать следующие
значения:
top – left
– верхний левый угол экрана;
top – center
– верхний центральный;
top – right
– верхний правый;
center left
– центральный левый;
center center
– центр экрана;
center right
– центральный правый;
bottom left
– нижний левый;
bottom center
– нижний центральный;
bottom right
– нижний правый угол экрана;
%(x y)
– задание положения в % (верхний левый 0% 0%);
pixels(x y)
– задание положения в пикселях (верхний левый 0 0).
При задании координат посредством ключевых слов, то если задано только одно
слово (например top), то второе принимается равным center. При задании координат
посредством процентов, если задано только одно значение, то второе принимается
равным 50%. При указании положения в процентах или координат, можно смешивать
значения, например (30% 500).
Фоновое
изображение - стенографическое свойство
Как вы можете видеть из примеров выше, когда мы имеем дело с фоном, требуется
задавать много свойств.
Чтобы сократить код, можно указать все свойства в одном единственном
свойстве. Оно называется стенографическое свойство.
Стенографическое свойство для фона - это просто "background":
Пример
{
background: #ffffff url('images/images.jpg')
no-repeat right top;
margin-right:200px;
}
нажмите чтобы увидеть результат
При использовании стенографического свойства порядок значений свойств
следующий:
-
background-color (цвет фона)
-
background-image (фоновое изображение)
-
background-repeat (повторение)
-
background-attachment (пристыковка)
-
background-position (положение)
Не имеет значения, если одно из значений пропущено, если те, которые
присутствуют, идут в таком порядке.
|