Background html not repeat

CSS background-repeat Property

The background-repeat property is used to define how the background image should be repeated. By its default value the background-repeat is repeated both horizontally and vertically. If the «repeat-x» value is set, the image will be repeated only horizontally. If the «repeat-y» value is set, the image will be repeated only vertically. There are two other values: «space» and «round». «Space» makes the image be repeated without clipping and «round» makes the image be repeated without gaps.

We need to use the background-repeat property with the background-image and background-position properties.

Initial Value	repeat
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS1
DOM Syntax	object.style.backgroundRepeat = «repeat-x»;

Syntax

background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | initial | inherit;

Example of the background-repeat property:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: repeat; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph for an example. p> body> html>

Result

In the following example, the background-image is not repeated.

Example of the background-repeat property with the «no-repeat» value:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: no-repeat; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph as for an example. p> body> html>

In the next example, the background-image is repeated only horizontally.

Example of the background-repeat property with the «repeat-x» value:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: repeat-x; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph for an example. p> body> html>

Here, the «repeat-y» value makes the image be repeated only vertically.

Example of the background-repeat property with the «repeat-y» value:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: repeat-y; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph for an example. p> body> html>

Let’s try an example where the background-image is repeated without clipping.

Example of the background-repeat property with the «space»value:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: space; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph for an example. p> body> html>

In the following example, the applied value makes the background-image be repeated without gaps.

Example of the background-repeat property with the «round» value:

html> html> head> title>Title of the document title> style> body < background-image: url("/uploads/media/default/0001/02/668fdd72934232cdeff7a45a89be805113c916b5.jpeg"); background-repeat: round; > style> head> body> h2>This is some heading for an example. h2> p>Some paragraph for an example. p> body> html>

Values

Value	Description	Play it
repeat	The background image is repeated both horizontally and vertically. This is the default value.	Play it »
repeat-x	The background image is repeated only horizontally.	Play it »
repeat-y	The background image is repeated only vertically.	Play it »
no-repeat	The background image in not repeated.	Play it »
space	The background image is repeated as much as possible without clipping.	Play it »
round	The background image is repeated without gaps.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

Practice Your Knowledge

The background-repeat property needs to be used with the

background-image and background-position properties. background-color and background-position properties. background-image and background-color properties.

Источник

background-repeat

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

Интерактивный пример

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round ) или равномерно растянуть от конца к концу (используя space ).

Синтаксис

/*Ключевые значения*/ background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-repeat: space; background-repeat: round; background-repeat: no-repeat; /*Два значения: горизонтальное | вертикальное*/ background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; /* Глобальные значения */ background-repeat: inherit; background-repeat: initial; background-repeat: unset; 

Значения

• • : Следующие однозначные имеют двухзначные эквиваленты:	repeat-x	тоже самое, что и repeat no-repeat
    repeat-y	тоже самое, что и no-repeat repeat
    repeat	тоже самое, что и repeat repeat
    space	тоже самое, что и space space
    round	тоже самое, что и round round
    no-repeat	тоже самое, что и no-repeat no-repeat	В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.

    repeat	Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
    space	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства background-position игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space .
    round	Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
    no-repeat	Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством background-position .

  Примеры

  HTML

  ol> li>no-repeat div class="one"> div> li> li>repeat div class="two"> div> li> li>repeat-x div class="three"> div> li> li>repeat-y div class="four"> div> li> li>repeat-x, repeat-y (multiple images) div class="five"> div> li> ol> 

  CSS

  /* Совместно для всех DIVS в примере */ li margin-bottom: 12px;> div  background-image: url(starsolid.gif); width: 144px; height: 84px; > /* повторение фона CSS */ .one  background-repeat: no-repeat; > .two  background-repeat: repeat; > .three  background-repeat: repeat-x; > .four  background-repeat: repeat-y; > /* Несколько изображений */ .five  background-image: url(starsolid.gif), url(https://developer.mozilla.org/static/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; > 

  Результат

  В этом примере каждому элементу списка соответствует другое значение background-repeat .

  Спецификация

  Начальное значение	repeat
  Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
  Наследуется	нет
  Обработка значения	список, каждый элемент которого содержит 2 ключевых слова, по одному на размер
  Animation type	discrete

  Поддержка браузеров

  BCD tables only load in the browser

  Смотрите также

  Found a content problem with this page?

  This page was last modified on 22 февр. 2023 г. by MDN contributors.

  Your blueprint for a better internet.

  MDN

  Support

  Our communities

  Developers

  Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
  Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

  Источник

  CSS background-repeat Property

  The background-repeat property sets if/how a background image will be repeated.

  By default, a background-image is repeated both vertically and horizontally.

  Tip: The background image is placed according to the background-position property. If no background-position is specified, the image is always placed at the element’s top left corner.

  Default value:	repeat
  Inherited:	no
  Animatable:	no. Read about animatable
  Version:	CSS1
  JavaScript syntax:	object.style.backgroundRepeat=»repeat-x» Try it

  Browser Support

  The numbers in the table specify the first browser version that fully supports the property.

  CSS Syntax

  Property Values

  Value	Description	Demo
  repeat	The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is default	Demo ❯
  repeat-x	The background image is repeated only horizontally	Demo ❯
  repeat-y	The background image is repeated only vertically	Demo ❯
  no-repeat	The background-image is not repeated. The image will only be shown once	Demo ❯
  space	The background-image is repeated as much as possible without clipping. The first and last image is pinned to either side of the element, and whitespace is distributed evenly between the images	Demo ❯
  round	The background-image is repeated and squished or stretched to fill the space (no gaps)	Demo ❯
  initial	Sets this property to its default value. Read about initial
  inherit	Inherits this property from its parent element. Read about inherit

  More Examples

  Example

  Repeat a background image both vertically and horizontally (this is default):

  Example

  Repeat a background image only horizontally:

  Example

  Do not repeat a background image. The image will only be shown once:

  Example

  Using background-repeat: space and background-repeat: round:

  #example2 <
  border: 2px solid black;
  padding: 25px;
  background: url(«w3css.gif»);
  background-repeat: space;
  >

  #example3 border: 1px solid black;
  padding: 25px;
  background: url(«w3css.gif»);
  background-repeat: round;
  >

  Example

  Use different background properties to create a «hero» image:

  .hero-image <
  background-image: url(«photographer.jpg»); /* The image used */
  background-color: #cccccc; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  >
  

  Источник