Повторение фона 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: no-repeat

Отображение фонового изображения только один раз также определяется свойством background-repeat:

Пример

Покажите фоновое изображение только один раз:

body { background-image: url("img_tree.png"); background-repeat: no-repeat; }

В приведенном выше примере фоновое изображение размещается в том же месте, что и текст. Мы хотим изменить положение изображения, чтобы оно не слишком сильно нарушало текст.

Фоновая позиция CSS

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

Пример

Расположите фоновое изображение в правом верхнем углу:

body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; }