Utilisation de background

Openweb.eu.org > Articles  > Utilisation de background

Abstract

Comment utiliser la propriété CSS background pour gérer des images d’arrière-plan ?

Article

Mettre une image de fond dans une page web est un exercice très répandu. Avec tout éditeur de page HTML, l'option classique est de générer un code du type : <body background="images/image_de_fond.png">, auquel on peut même ajouter bgproperties="fixed" qui rend fixe l'image de fond ; mais cet attribut ne fonctionne qu'avec MSIE. Avec les feuilles de style on peut obtenir beaucoup plus, tout en séparant la présentation (la mention de cette image) de la structure (l'élément body).

Avertissements préliminaires :

  • Une image de fond doit être légère. Comprenez par là qu'une image de 20 ko c'est déjà beaucoup : cela peut être long à charger et provoquer des problèmes d'affichage.
  • Attention aux difficultés de lecture qu'une image de fond trop contrastée peut provoquer.
  • Attention aussi à toujours prendre une couleur de fond différente de celle de la police de caractère, car en attendant que l'image de fond se charge, on ne verra rien. Le résultat sera également illisible si l'utilisateur a désactivé l'affichage des images dans son navigateur, ou si l'image vient à être indisponible.

Pour illustrer tout cela, visionnez ce mauvais exemple : la photo fait 53 ko ; la couleur utilisée, pour la police de caractère et le fond, est blanche.

Code CSS de base

L'image de fond se déclare en général pour l'élément body (corps de page), mais on peut aussi l'appliquer à un bloc (<div></div>), ou un titre (<hx></hx>), un lien (<a></a>) afin de créer un bouton, etc.

Prenons l'exemple du corps de page. La syntaxe CSS de base sera celle-ci :

body {
color:black;
background-color:white;
background-image:url(images/image_de_fond.png);
margin:0;
}
  • color renseigne la couleur de la police de caractère ;
  • background-color est de la couleur de fond de page ;
  • background-image:url() est bien-sûr l'adresse de l'image choisie pour le fond de page. Attention : cette URL est relative à celle du fichier CSS, et non à celle du document (X)HTML.
  • Pour éviter des problèmes de marges parasites, on peut les fixer à 0 pixels à l'aide de margin:0.

Sans plus de renseignements, l'image de fond apparaît en mosaïque et défile en même temps que le texte.

Comme d'habitude, cette syntaxe CSS est à mettre dans l'en-tête de la page (entre les balises <head></head>) ou dans une feuille de style externe.

Visionner l'exemple 2.

Fond de page fixe

Pour que le fond de page devienne fixe, on rajoutera dans le code :

background-attachment:fixed;

Visionner l'exemple 3.

Positionner l'image

On peut aussi empêcher la mosaïque grâce à la propriété background-repeat et placer ainsi l'image dans une partie très précise de l'écran.

  • Par défaut, l'image se positionne en haut à gauche de l'écran :

    body {
    color:black;
    background-color:white;
    background-image:url(images/image_de_fond.png);
    background-repeat:no-repeat;
    }

    Visionner l'exemple 4.

  • Si l'on veut qu'elle se place en haut à droite, on rajoutera le code :

    background-position:right top;

    ou bien :

    background-position:100% 0%;

    Visionner l'exemple 5.

  • Pour une position au centre de la page, cela donnera :

    background-position:center center;

    ou bien :

    background-position:50% 50%;

    Visionner l'exemple 6.

  • Pour une position en bas à droite :

    background-position:right bottom;

    ou bien :

    background-position:100% 100%;

    Visionner l'exemple 7.

Remarques

background-repeat accepte 4 valeurs :

  • no-repeat (image unique) ;
  • repeat-x pour une répétition de l'image uniquement horizontale ;
  • repeat-y pour une répétition uniquement verticale ;
  • repeat pour la mosaïque complète.

Vous aurez remarqué, bien sûr, que les pourcentages dans le background-position offrent plus de lattitude que les attributs right, center, left et top, center, bottom.

Notons enfin qu'on peut aussi cumuler ces différentes informations dans un unique background. Exemple :

body {
background: white url(image_de_fond.png) no-repeat right bottom;
}

À propos de cet article

Vos commentaires

  • Damien Le 31 janvier à 19:41

    Excellent Tutorial, avez-vous des suggestion concernant l’adaptation des background pour les smartphone s’il vous plait ?

    Amicalement,
    Damien

  • Richard SIMONET Le 31 mars à 18:29

    Bonjour, excellent tutoriel en effet.

    La seule question que cependant je me pose c’est au niveau de la hauteur de l’image.

    Doit on, quand on a beaucoup d’informations sur la page éditer une image très haute (ascenseur) ?

    Puisque cette dernière doit être légère, une image à haute résolution par exemple 1920 x 7000 pixels sera trop volumineuse.

    Quelle est la solution ?

    Merci de votre réponse.

    Cordialement.
    Richard

  • Pascale Lambert Charreteur Le 31 mars à 18:57 En réponse à : Richard SIMONET

    Il est clair qu’une image d’une taille aussi importante risque de ralentir considérablement le chargement.
    Si c’est en plus du fin fond de la cambrousse, avec une connexion poussive à tenter de visualiser la page sur un smartphone, vous allez perdre le client clin d'œil

    Il existe maintenant en CSS3 des méthodes permettant d’étirer une image. Avec une image en SVG on n’aura pas de perte de qualité.

    Je vous invite à lire ces tutoriels :

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom