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