Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-repeat

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Summary

The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.

Note: If the value of this property is not set in a background shorthand property that is applied to the element after the background-repeat CSS property, the value of this property is then reset to its initial value by the shorthand property.

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

Syntax

background-repeat: repeat-style[, repeat-style]*

Values

repeat-style
Is following either the one-value syntax — and in that case the values are shorthand for ther two-value equivalent:
repeat-x is the equivalent of repeat no-repeat
repeat-y is the equivalent of no-repeat repeat
repeat is the equivalent of repeat repeat
space is the equivalent of space space
round is the equivalent of round round
no-repeat is the equivalent of no-repeat no-repeat
Or the two-value syntax where the first value represents the horizontal behavior of the repetition and the second value the vertical behavior:
 
repeat The image is repeated in the given direction as much as needed to cover the whole background image painting area. The last image may be clipped if the whole thing won't fit in the remaining area.
space The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. The remaining non-covered space is spaced out evenly between the images. The first and last images touches the edge of the element. The value of the background-position CSS property is ignored for the concerned direction, except if one single image is greater than the background image painting area, which is the only case where an image can be clipped when the space value is used.
round The image is repeated in the given direction as much as needed to cover most of the background image painting area, without clipping an image. If it doesn't cover exactly the area, the tiles are resized in that direction in order to match it.
no-repeat The image is not repeated (and hence the background image painting area will not necessarily been entirely covered). The position of the non-repeated background image is defined by the background-position CSS property.

Examples

HTML

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

CSS

/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* Multiple images */
.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}

Result

In this example, each list item is matched with a different value of background-repeat.

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Определение 'background-repeat' в этой спецификации.
Кандидат в рекомендации Added support for multiple backgrounds images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level element by defining precisely the background painting area.
CSS Level 2 (Revision 1)
Определение 'background-repeat' в этой спецификации.
Рекомендация No significant changes
CSS Level 1
Определение 'background-repeat' в этой спецификации.
Рекомендация  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 или ранее) 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Different values for X & Y directions (two-value syntax) (Да) 13.0 (13.0) ошибка 548375 9.0 (Да) (Да)
round and space keywords Нет Нет ошибка 548372 9.0 10.5 Нет
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
Multiple backgrounds ? ? ? ? ?
Different values for X & Y directions (two-value syntax) ? ? ? ? ?
round and space keywords ? ? ? ? ?

See also

 

Метки документа и участники

 Внесли вклад в эту страницу: SphinxKnight, teoli, piar.tattoo@gmail.com
 Обновлялась последний раз: SphinxKnight,