Sur cette page :

19.1# Les propriétés de répétition

Nous l’avons vu dans le chapitre précédent, il existe une propriété appelée background-repeat, qui permet de gérer la manière dont le fond d’un boc sera géré en fonction de sa taille. Rappelons rapidement son fonctionnement :

• background-repeat: no-repeat; permet d’interdire l’utilisation du fond comme une mosaïque, si la taille de l’image est inférieure à celle du bloc, elle ne sera donc affichée qu’une fois,
• il existe naturellement le comportement inverse, choisi par défaut : background-repeat: repeat;,
• background-repeat: repeat-x; indique que le fond sera répété sur un axe horizontal (les abscisses) uniquement,
• background-repeat: repeat-y; signifie, à l’inverse, que le fond ne sera répété que sur un axe vertical (les ordonnées).

Cette propriété peut être très intéressante pour réaliser certains effets sur des fonds, quand ceux-ci représentent des motifs ou des dégradés : il est en effet possible de couvrir la totalité d’un bloc grâce à une image de quelques pixels seulement. D’ailleurs, plusieurs sites internet vous proposent de générer automatiquement ces motifs prêts à être utilisés comme mosaïques.

Le site Background patterns est l’un d’eux (il est en anglais, mais très facile à utiliser !). Nous allons utiliser un motif généré depuis ce site internet pour l’exemple :

l’appliquer comme fond est un jeu d’enfant :

<div class="patternized">
  <p>Ceci est un bloc avec un joli motif !</p>
</div>

.patternized
{
  background: url('images/pattern.png');
  color: white; /* on affiche le texte en blanc... pour le rendre lisible ! */
}

Le résultat obtenu sera donc :

L’exemple ici est assez sommaire, mais je vous invite à consulter l’article à ce sujet sur le blog de Smashing Magazine, qui présente de nombreux exemples d’utilisation de motifs vraiment sympathiques.

Il est possible, dans certains cas, d’optimiser Prenons un autre exemple plus local, au hasard… le fond de l’en-tête du site, mais si, celui là :

Pour réaliser le fond bleu-ciel avec un petit dégradé, j’ai simplement découpé l’image en gardant sa hauteur d’origine et en réduisant sa largeur au minimum : ici, une largeur d’un pixel suffit ! L’image utilisée est donc :

L’image est ici élargie à 10 pixels pour rester visible !

Vous connaissez déjà le résultat obtenu, nous allons donc nous intéresser au code :

<div id="head">Martius Web<div>

#head
{
  background-image: url('images/head/bg.png');
  background-repeat: repeat-x;
  width: 100%;
  height: 112px;
}

Rien de très difficile à comprendre, on choisit simplement de forcer la hauteur du bloc à 112 pixels pour que l’image soit intégralement affichée, mais dans un bloc donc le contenu dépasse cette hauteur, il devient inutile de préciser cette propriété. On peut, éventuellement, la remplacer par min-height, bien que celle-ci ne soit pas supportée par Internet Explorer avant la version 7.

L’opération est assez similaire pour répéter un motif sur la hauteur, je vous invite à tester cet effet par vous même pour bien assimiler son fonctionnement !

19.2# Changer de fond sans recharger l’image lors d’un survol

On peut également optimiser l’utilisation des images sur notre site en utilisant les propriétés de positionnement des fonds.

Pour réaliser un bouton dont le fond change lors du passage de la souris on pourrait utiliser les deux images suivantes :

(button_normal.png) et (button_active.png) lors du survol de la souris.

On pourra utiliser les styles css suivants pour réalisé l’effet voulu :

#menu a
{
  background: url('images/button_normal.png');
  display: block;
  width: 100px;
  height: 25px;
  padding-top: 5px;
  text-align: center;
}
#menu a:hover
{
  background: url('images/button_active.png');
  color: #FEFEFE;
}

Vous imaginez le résultat :

test

Vous pouvez me croire sur parole ou regarder la capture d’écran ci-dessous ; lors de l’affichage d’une page web, l’opération la plus longue est souvent le traitement de la requête HTTP par le serveur, c’est à dire l’attente et la réception du contenu de la page. Pour chaque image sur votre page, il faudra compter une requête. Minimiser leur nombre est probablement le meilleur moyen d’optimiser la vitesse d’affichage de votre site internet.

Il devient alors très intéressant d’utiliser une seule image pour le fond du bouton, et c’est d’autant plus vrai qu’il est possible de conserver l’effet interactif souhaité !

Dans notre exemple, les dimensions d’un bouton sont 100px par 30px. nous pouvons utiliser une image de 100px par 60px qui contient les deux fonds :

Nous pourrons reproduire l’effet grâce à cette feuille de styles :

#menu a
{
  background: url('images/button.png');
  display: block;
  width: 100px;
  height: 25px;
  padding-top: 5px;
  text-align: center;
}
#menu a:hover
{
  background: url('images/button.png') -30px 0;
  color: #FEFEFE;
}

Nous utilisons les propriétés de positionnement du fond en CSS, en plaçant l’image 30 pixels au dessus de la zone visible (-30px), occasionnant l’affichage des 30 derniers pixels de l’image comme fond du bouton. Il est également possible de décaler l’image sur un axe horizontal, avec une image représentant une mosaïque d’icônes.