Background-repeat - CSS Property
Summary of characteristics of the background-repeat property
repeat | no-repeat | repeat-x | repeat-y | round | spacerepeatDiscrète: during an animation, the background-repeat property passes from one value to another without transition.Per grammar: serialization in the order of syntax.Syntax diagram of background-repeat.
background-repeat property.The links in the diagram provide more details about the values.
Download the diagram in SVG.
In the diagram, the bold terms are the predefined words of CSS, the other terms are described below:
- In the case of multiple backgrounds, you list several values separated by a comma.
Description of the background-repeat property.
background-repeat defines how the background image is repeated across the background area surface.
background-repeat:space;background-repeat:round;
For a general overview of background options, check out the page background.
Values for background-repeat.
- background-repeat: repeat;
Default value. The background image is repeated across the entire surface, without changing the original size of the image.
repeat - background-repeat: no-repeat;
The background image is displayed only once. Its position is set by the
background-positionproperty.no-repeat - background-repeat: repeat-x;
The background image is repeated only horizontally.
repeat-x - background-repeat: repeat-y;
The background image is repeated only vertically.
repeat-y - background-repeat: space;
The background image is repeated as much as possible without cutting it. The displayed images are spread out over the surface of the background area.
space - background-repeat: round;
The background image is repeated as much as possible without cutting it. The displayed images are stretched to cover the surface of the element.
round - background-repeat: space round;
Two values can be specified, separated by a space. The first one corresponds to repetition in the horizontal direction, and the second in the vertical direction.
However, this option to specify two values is only useful for combiningroundandspace, as each of the other values implies both directions on its own.space round - background-repeat: round, repeat, repeat-x;
When multiple values are specified, separated by commas, they apply to multiple backgrounds. See the page on arrière-plans multiples for more on this.
no-repeat,repeat - background-repeat: initial; (
repeat) background-repeat: inherit; background-repeat: revert; background-repeat: revert-layer; background-repeat: revert-rule; background-repeat: unset;See the following pages for more details:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the background-repeat property.
For this animation, we used a somewhat special technique, necessary because we had to animate not only the property background-repeat, but also the label,
on the pseudo-element ::after. To do this, we use custom properties (or variables).
Of course, the background-repeat property can be animated in the usual way.
background-repeat:Access the background-repeat property via a program
Change the background repetition in Javascript.
In JavaScript, here's how to change the value of background-repeat. JavaScript offers a syntax using the typical CSS-style notation,
in kebab-case (a dash to separate words), and another syntax using camel-case notation (a capital letter to separate words).
let el = document.getElementById('id');
el.style['background-repeat'] = 'no-repeat';
// or
let el = document.getElementById('id');
el.style.backgroundRepeat = 'no-repeat';
Read the background repetition in JavaScript.
This code gets the value of background-repeat if it has been set directly on the element itself using the HTML style attribute,
and not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['background-repeat'];
// or
let el = document.getElementById('id');
let value = el.style.backgroundRepeat;
Read the computed value of background-repeat in Javascript.
The computed value is the one that results from evaluating the cascade of inheritances. This can be the value set with the HTML style attribute,
a value set via a CSS selector, an inherited value, or even the initial value of the property (repeat in the case of background-repeat).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('background-repeat');
Read or write the background repeat with jQuery.
// Read the value:
$('#id').prop('background-repeat');
// Write the value:
$('#id').prop('background-repeat', 'no-repeat');
$('#id').prop('{background-repeat': 'no-repeat'});
With JQuery, read the computed value of background-repeat.
let value = $('#id').css('background-repeat');
Other code examples.
Other code examples for handling CSS with JavaScript and JQuery are given on the page Javascript and CSS.
Test it yourself.
The buttons below either show the assigned value of the property background-repeat or the computed value. For this property, it won't make a difference
because it only accepts predefined values. However, if you try to assign an incorrect value, the assigned value will be null, and the computed value will
be the property's initial value (repeat).
Simulator.
To get a good view of all the implications of background-repeat, you can shrink the browser window and watch how the background image behaves.
Browsers compatibility with background-repeat.
All modern browsers handle the background-repeat property and its different values correctly.
background-repeat property defining how the background image is repeated.background-repeatproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the background-repeat property.
-
Cascading Style Sheets specification - Version 1
This first level of the CSS specification describes the mechanism of cascading style sheets. Authors and readers can add styles to documents. Mainly intended for formatting HTML documents, CSS allows defining colors, fonts, text formatting, spacing (margins), etc. The CSS language is easy to understand, readable, and easy to write; it uses common terms from desktop publishing.
Regardingbackground-repeatInitial definition of thebackground-repeatproperty in the first version of CSS.
November 17, 1995Working Draft.
November 12, 1996Proposed for recommendation.
December 17, 1996Recommendation .
September 13, 2018Old specification, declared obsolete. -
Cascading Style Sheets Level 2 - Revision 1 Specification
This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.
Regardingbackground-repeatAcceptance of theinheritvalue.November 04, 1997Working Draft.March 24, 1998Proposed for recommendation.May 11, 1998Recommendation . -
CSS Backgrounds and Borders Module Level 3
Level 3 of the specification also explains how to position the background relative to the background area, and how to crop it.
Regarding borders, the concept of image borders is introduced, as well as the ideas of rounded corners and box shadows.Regardingbackground-repeatAddedspaceandroundvalues forbackground-repeat.August 02, 2002Working Draft.
December 17, 2009Candidate Recommendation.
See also, regarding backgrounds.
Everything about backgrounds and borders is described in the W3C specification "CSS Backgrounds and Borders Module". Here are the main properties described in this standard:
Properties:
