Повторение фона CSS

CSS background-repeat

По умолчанию: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("tree.png");
  background-repeat: no-repeat;
}

Попробуйте сами

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

CSS background-position

background-position Свойство указывает положение фонового изображения.

Пример

Поставить фоновое изображение в верхний правый угол:

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

Попробуйте сами