Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

background-repeat - Propriété CSS

background-repeat

Résumé des caractéristiques de la propriété background-repeat

Description rapide
Définit comment est répété l'image d'arrière-plan.
Statut
Standard
Type de valeur
Valeur prédéfinie {1-2}
Valeurs prédéfinies
repeat | no-repeat | repeat-x | repeat-y | round | space
Pourcentages
Ne s'appliquent pas.
Valeur initiale
repeat
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété background-repeat passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

Description de la propriété background-repeat.

background-repeat définit comment l'image d'arrière-plan est répétée sur la surface de l'élément.

Pour une présentation générale des possibilités des arrière-plans, reportez-vous à la page background.

Syntaxes pour background-repeat.

background-repeat:
Schéma syntaxique de la propriété background-repeatSyntaxe de background-repeat (configuration de ou des arrière-plans) repeat-x repeat-x repeat-y repeat-y repeat repeat no-repeat no-repeat space space round round , , {1,2} {1,2}
;
  • background-repeat: repeat;

    Valeur par défaut. L'image d'arrière-plan est répétée sur toute la surface de l'élément, sans changement de la taille d'origine de l'image.

  • background-repeat: no-repeat;

    L'image d'arrière-plan n'est affichée qu'une seule fois. Son emplacement est défini par la propriété background-position.

  • background-repeat: repeat-x;

    L'image d'arrière-plan est répétée uniquement dans le sens horizontal.

  • background-repeat: repeat-y;

    L'image d'arrière-plan est répétée uniquement dans le sens vertical.

  • background-repeat: space;

    L'image d'arrière-plan est répétée tant que c'est possible sans la couper. Les images affichées sont réparties sur la surface de l'élément.

  • background-repeat: round;

    L'image d'arrière-plan est répétée tant que c'est possible sans la couper. Les images affichées sont étirées pour couvrir la surface de l'élément.

  • background-repeat: round space;

    Deux valeurs peuvent être indiquées, séparées par un espace. La première correspondant à la répétition dans le sens horizontal, et la deuxième dans le sens vertical.
    Néanmoins cette possibilité d'indiquer deux valeurs n'est utile que pour combiner round et space, chacune des autres valeurs impliquant à elle seule les deux directions.

  • background-repeat: round, repeat, repeat-x;

    Lorsque plusieurs valeurs sont spécifiées, séparées par des virgules, elles s'appliquent à des arrière-plans multiples. Voir à ce sujet la page sur les arrière-plans multiples.

  • background-repeat: initial; background-repeat: inherit; background-repeat: revert; background-repeat: revert-layer; background-repeat: unset;

    La valeur initiale est : repeat.

Manipulation de la propriété background-repeat par programme.

Les exemples de code s'appliquent à l'élément ci-dessous. Les modifications de la valeur de background-repeat sont immédiatement répercutées sur l'affichage.

Modifier la valeur de background-repeat en Javascript.

En Javascript, voici comment modifier la valeur de background-repeat. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).


function setBackgroundRepeat(el) {
el.style['background-repeat']='no-repeat';
// ou
el.style.backgroundRepeat='no-repeat';
}

Lire en Javascript la valeur de background-repeat.

Ce code récupère la valeur de background-repeat affectée directement à l'élément lui-même en utilisant l'attribut style du HTML, et non pas en passant par un sélecteur CSS.


function getBackgroundRepeat(el) {
alert(el.style['background-repeat']);
// ou
alert(el.style.backgroundRepeat);
}

Lire la valeur calculée de background-repeat en Javascript.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Cela peut être la valeur affectée avec l'attribut HTML style, une valeur affectée via un sélecteur CSS, une valeur héritée, ou encore la valeur initiale de la propriété.


function getCalcBackgroundRepeat(el) {
alert(window.getComputedStyle(el).getPropertyValue('background-repeat'));
}

Modifier la valeur de la propriété background-repeat avec JQuery.


function setBackgroundRepeat(el) {
$(el).css('background-repeat','space');
// ou
$(el).css('backgroundRepeat','space');
}

Lire la valeur calculée de la propriété background-repeat avec JQuery.


function getCalcBackgroundRepeat(el) {
alert($(el).css('background-repeat'));
// ou
alert($(el).css('backgroundRepeat'));
}

Simulateur.

Pour bien visualiser toutes les implications de background-repeat, vous pouvez réduire la largeur de la fenêtre du navigateur et observer comment se comporte l'image d'arrière-plan.

background-repeat :

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs traitent correctement la propriété background-repeat et ses différentes valeurs.

Colonne 1
Prise en charge de la syntaxe générale de background-repeat.
Colonne 2
Support des arrière-plans multiples pour la propriété background-repeat.
Colonne 3
Support des valeurs round et space avec la propriété background-repeat.
1
background-repeat
2
Multiples
3
round
space
Estimation de la prise en charge en pourcentage du parc actuel.
96%
97%
98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que background-repeat.

Les spécifications CSS éditées par le W3C sont organisées en modules. background-repeat fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit comment l'image de bordure est découpée.
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.