images et arrières-plans

L'élément <img>

L'image source

Sans l'attribut src, l'élément <img/> n'apparait pas dans le navigateur. L'attribut src est donc indissociable de l'élément <img/>.
La valeur à donner à l'attribut src est l'adresse de l'image que nous voulons faire apparaître (Nous verrons plus tard les principes de l'adressage).

L'image affichée est généralement située dans un dossier du site html. Ainsi, nous appelons ici l'image Magellan3.jpg qui est située dans le dossier ImgImages. Ce qui doit s'écrire :

L'image pourrait tout aussi bien être appelée depuis un site distant, comme dans l'exemple ci-contre :
<img src="http://ateliercss2.free.fr/ VieuxGreements/
GCarre/3MCarre/Voilure/CuttySark500.jpg"/>

Notez SVP au passage :

Qu'il ne faut surtout pas oublier l'extension de l'image (.jpg, .gif, .png, etc..).
Que la casse du nom d'une image doit être strictement respectée dans l'adresse de cette image.

Le dimensionnement de l'image

Par défaut, l'élément <img/> adopte les dimensions de l'image source. Ainsi dans l'exemple ci-dessus, l'élément <img/> adopte la taille de 200px*200px de l'image source Magellan3.jpg.

Si les dimensions de l'image source ne sont pas adaptées à la composition souhaitée de la page, elles peuvent être modifiées :

Soit par les attributs width="..." ou height="..." qui se placent entre les chevrons de l'élément <img/>, mais dont l'usage est déconseillé.
Soit plutôt, par les propriété css width:...; ou height:...; que l'on attribue à l'élément <img/> par la feuille de style externe, par la feuille de style interne ou par le style en ligne.

Les proportions de l'image

Pour modifier la taille d'une image, il suffit de préciser une seule des dimensions de celle-ci width="..." ou height="...", ses proportions initiales seront conservées par le navigateur.

Il est possible de déformer une image en lui attribuant simultanément des valeurs de width="..." et height="..." non proportionnelles à celles de l'image source, comme ci-contre avec notre image Magellan3.jpg.

Précautions

Les modifications de dimensions que l'on peut faire subir à l'image source doivent rester faibles car :

Une image de grandes dimensions, réduite de façon importante conservera son poids et nécessitera un long temps de chargement, ce qui s'avère ennuyeux pour la personne qui consulte la page.
Pour réduire le temps de chargement des images, il est conseillé de limiter leur taille à une cinquantaine de Ko.
Une image de petite taille exagérément agrandie ne sera pas nette.

Moralité : l'idéal est d'adapter préalablement vos images à votre page avec un logiciel de traitement d'images.

Le positionnement de l'image dans le texte

N'oublions pas que l'élément <img/> même si l'on peut le dimensionner, a un comportement inline. Par défaut il s'affiche donc dans la continuité du texte dans lequel il est inséré.

Nous pouvons donc insérer l'élément <img/> en début d'un texte, comme dans le paragraphe précédent, ou au milieu d'un texte comme dans ce paragraphe.

Nous pouvons aussi insérer l'élément <img/> à la fin d'un texte comme dans ce dernier exemple.

Dans le comportement par défaut, la hauteur de la ligne occupée par l'élément <img/> est déterminée par la hauteur de l'image, ce qui laisse un espace blanc important au milieu du texte et ne correspond pas nécessairement, vous en conviendrez, à un effet souhaitable pour la mise en page.

Ce comportement par défaut reste donc un problème qui ne pourra être résolu qu'en positionnant les images dans le texte à l'aide de la propriété float que nous étudierons un peu plus tard.

Les Arrières-Plans

Un arrière-plan est une couleur unie ou une image qui orne le fond d'un élément et sur lequel s'affichent le textes ou les images contenus dans celui-ci.

À la différence de l'élément <img/>, l'arrière-plan n'interfère pas avec le contenu de l'élément, dont il est une propriété. On peut ainsi écrire sur un fond coloré ou sur une image d'arrière-plan.

Cependant attention, une image présente fréquemment des variations importantes de couleurs et d'intensité lumineuse, et n'offre pas toujours de bonnes conditions de lisibité pour un texte, en particulier avec de petits caractères. Commme on peut le constater avec l'exemple de l'image Victoria.jpg un peu plus bas.

la propriété background

Un arrière-plan peut être attribué à un élément par la propriété background qui se décline en quatre sous-propriétés :

background-image
background-repeat
background-position
background-color

1° background-image

L'image d'arrière-plan est définie par la sous-propriété background-image dont la valeur, comme celle de l'attribut src de l'élément <img/> est l'adresse de l'image que nous voulons faire apparaître.
Cette adresse doit être placée entre des parenthèses précédés du préfixe url comme dans l'exemple ci-dessous.

De même que l'image-source de l'élément <img/>, l'image d'arrière-plan pourrait très bien être appelée depuis un site distant.

2° background-repeat

Par défaut, l'image d'arrière-plan occupe toute la surface de l'élément auquel elle est attribuée. Si elle est plus grande que l'élément, elle est tronquée, si elle est plus petite que l'élément, elle est répétée selon les deux axes de celui-ci.

La sous-propriété background-repeat permet de contrôler cette répétition de l'image d'arrière-plan, elle peut adopter quatre valeurs :

repeat-x : L'image est répétée selon l'axe des abscisses.
repeat-y : L'image est répétée selon l'axe des ordonnées.
no-repeat : L'image n'est pas répétée.
repeat : L'image est répétée selon les deux de l'élément.
Cette valeur qui correspond au comportement par défaut de l'image d'arrière-plan, n'est utilisé que pour annuler une des valeurs précédentes.

Voyez les exemples ci-dessous :

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

3° background-position

Par défaut l'image d'arrière-plan se positionne au point d'abscisse 0 et d'ordonnée 0 de l'élément, c'est à dire dans son angle haut-gauche.

La sous-propriété background-position permet de contrôler le positionnement de l'image d'arrière-plan, par rapport au point 0 de l'élément.

Par des Mots-Clefs

La position de l'image d'arrière-plan peut être définie par six mots clefs qui peuvent être attribués comme valeurs de la sous-propriété background-position

top : en haut
right: à droite
bottom : en bas
left : à gauche
center : au centre
inherit : hérité

Ces mots peuvent être combinés en les séparant par un espace, comme dans les exemples ci-dessous :

background-position : top;
background-position : top left;
background-position : bottom right;
background-position : center center;

background-image : url(ImgImages/Magellan4.jpg);
background-repeat : no-repeat;
background-position : center center;

ATTENTION quand même, les combinaisons aberrantes comme top bottom ou right left ne fonctionnent pas.

Par les Coordonnées en Abscisse et en Ordonnée

Le positionnement par mots-clefs est une technique simple mais qui manque de précision.

Pour positionner avec précision une image d'arrière plan, il est préférable d'utiliser les coordonnées en abscisse et en ordonnée.

Les valeurs à attribuer à background-position sont, dans l'ordre, celles de l'abscisse puis de l'ordonnée de l'angle haut-gauche de l'image par rapport au point 0 de l'élément. Ces valeurs peuvent être exprimées dans toutes les unités utilisables px, em, %, in, pt, etc... Elles peuvent être négatives.
Les deux valeurs doivent impérativement être séparées par un espace.

Voyez les exemples ci-dessous :

background-position : 370px 80px;
background-position : -150px 90px;
background-position : 150px -90px;

background-image : url(ImgImages/Magellan4.jpg);
background-repeat : no-repeat;
background-position : 370px 80px;

4° background-color

Vous êtes déjà familiarisés avec la propriété background-color que nous avons utilisée dans les TP précédents.

Cette propriété permet d'attribuer à un élément une couleur d'arrière-plan qui peut soit remplir toute la surface de l'élément, soit venir en complément d'une image d'arrière-plan qui n'occupe pas toute la surface de l'élément

La valeur à donner à background-color peut être soit un mot-clef de couleur soit une notation RGB en système décimal ou hexadécimal ou encore en pourcentage.

background-color : fuschia;
background-color : rgb(255, 0, 255);
background-color : rgb(100%, 0, 100%);
background-color : #ff00ff;

Formes condensées de la propriété background

L'écriture des propriétés de background peut être considérablement simplifiée.

Forme condensée simple

Quand une seule sous-propriété doit être affichée le mot background suivi de deux points et de la valeur de la sous-propriété, suffit, ainsi :

background : #ff00ff; peut remplacer background-color : #ff00ff;

background : url(ImgImages/Victoria.jpg); peut remplacer
background-image : url(ImgImages/Victoria.jpg);

Forme condensée multiple

Quand plusieurs sous-propriétés doivent être affichées le mot background seul, suivi de deux points et des valeurs de chacune des sous-propriétés, séparées par un espace, suffit, ainsi :

background-image : url(ImgAP/Fokker.jpg); background-repeat : no-repeat; background-position : 180px 100px; background-color : #78A839;

peut être simplifié en

background : url(ImgAP/Fokker.jpg) no-repeat 160px 80px #78A839;

Vous pouvez remarquez que, à la différence de la propriété border dont la forme condensée doit respecter un ordre précis, dans la forme condensée de background, l'ordre d'écriture des valeurs n'a aucune importance.

La forme condensée ci-dessous fonctionnera aussi bien que la précédente.

background : no-repeat #78A839 160px 80px url(ImgAP/Fokker.jpg) ;

En complément de ce tuto, vous pouvez consulter la page d'exemples Les images d'arrière-plan

Tableau Récapitulatif de la propriété background
Propriétés		En français	Valeurs Possibles
background	-image	Image d'arrière-plan	url( adresse de l'image )
	-repeat	Répétition de l'image	repeat, repeat-x, repeat-y, no-repeat
	-position	Position de l'image	top, right, bottom, left, center,inherit ou abcisse et ordonnée de l'image en px, %, em, in, cm,...
	-color	Couleur d'arrière-plan	Mot-clefs ou Code Couleur en hexadécimal, décimal ou pourcentage

Pour mettre en pratique ce tuto, consultez le TP Semaine 45.