CSS Background Repeat - Повторение фона
CSS background-repeat
По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения следует повторять только по горизонтали или вертикали, иначе они будут выглядеть странно, как это:
Если изображение выше повторяется только по горизонтали (background-repeat: repeat-x;), фон будет выглядеть лучше:
Пример
body
{
background-image: url("../images/gradient_bg.png");
background-repeat: repeat-x;
}
Попробуйте сами »
Совет: Чтобы повторить изображение по вертикали, установите background-repeat: repeat-y;
CSS background-repeat: no-repeat
Отображение фонового изображения только один раз также определяется свойством background-repeat:
Пример
Показать фоновое изображение только один раз:
body
{
background-image: url("../images/img_tree.png");
background-repeat: no-repeat;
}
Попробуйте сами »
В приведенном выше примере фоновое изображение помещается в то же место, что и текст. Мы хотим изменить положение изображения, чтобы оно не слишком мешало тексту.
CSS background-position
Свойство background-position используется для указания положения фонового изображения.
Пример
Разместите фоновое изображение в правом верхнем углу:
body
{
background-image: url("../images/img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Попробуйте сами »
