Images d'arrière plan

Voyons les propriétés CSS liées aux arrières plans, on verra ensuite les astuces !

Propriétés CSS

background-image
Fichier image d'arrière plan.
On renseigne sa valeur par url('URIdelimage') : image d'arrière plan
background-position
Position de l'image dans l'arrière plan
Valeurs : top ou bottom ou center, left ou right ou center, ou encore 1 distance (position horizontale, sera centré verticalement) ou enfi 2 distances (positions horizontale et verticale)
background-repeat
Indique si l'arrière plan doit se répéter, et si oui, dans quelle(s) direction(s)
Valeurs possibles : repeat, repeat-x, repeat-y, no-repeat

Application : rollover

exemple

Code XHTML

<a href="#" class="rolloverexemple">exemple</a>

Code CSS

a.rolloverexemple {
    display:block;
    /*Largeur de l image*/
    width:150px;
    /*Hauteur de la moitie de l image*/
    height:30px;
    
    color:#161147;
    /*Warning du validateur sinon*/
    background-color:#FCC212;
        
    text-decoration:none;
    font-size:22px;
    text-align:center;
    
    /*Arriere plan*/
    background-image:url('images/rollover.png');
    background-position:top left;
    
}
a.rolloverexemple:hover {
    background-color:#291D81;
    color:#FFFED0;
    background-position:bottom left;
}

Image d'arrière plan :

image du rollover

On utilise qu'une seule image pour ne pas avoir de problème de latence (dû au téléchargement de l'image) lors du passage de la souris sur le menu. L'image est deux fois plus grande que le bouton, on ne fait que faire glisser l'arrière plan au passage de la souris.

Cette méthode a aussi un avantage : on peut utiliser la même image pour tous les boutons car le texte du lien est dans le html. On préserve encore ici un peu de bande passante.

Application : bel encart de largeur fixe

Ceci est un texte d'exemple qui met en relief le fait que cet encart est fort joli.
Cet encart est réalisé de la même manière.

La largeur de ces encart est fixe, mais leur hauteur s'adapte automatiquement au contenu. Cependant, cette réalisation se fait aux dépends de la séparation forme/fond. On ajoute en effet 2 div, dont au moins une est inutile d'un point de vue sémantique.

Cette technique peut être utilisée par exemple pour faire un menu de largeur fixe aux coins arrondis.

Précisons que pour réaliser une zone adaptable en hauteur ET en largeur, on doit imbriquer non pas 2 div mais 4... Par exemple pour mettre des coins arrondis aux menus.

Code XHTML

<div class="divhaut">
    <div class="divcontenu">
        <samp>
        Ceci est un texte d'exemple qui met en relief le fait que cet encart est fort joli.
        </samp>
    </div>
</div>

La balise samp désigne un exemple...

CSS :

div.divhaut {
    width:150px;
    padding:30px 0 0 0;
    background-image:url('images/haut.gif');
    background-position:top;
    background-repeat:no-repeat;
    float:right;
    margin:4px;
}
div.divcontenu {
    width:150px;
    padding:0;
    background-image:url('images/bas.gif');
    background-position:bottom;
    background-repeat:no-repeat;
    max-height:300px;
    text-align:justify;
}
div.divcontenu samp {
    margin:0;
    padding:0 4px 20px 4px;
}

Pour "décoller" le texte du bord, on pourrait utiliser le padding des boites. Mais du fait que Mozilla et IE n'interprêtent pas de la même manière les tailles, c'est déconseillé. Il vaut mieux mettre de la marge aux éléments à l'intérieur comme ici pour la balise samp

Image du haut :
Image du haut
Image du bas :
Image du bas

Cadre de taille adaptable, coins arrondis

Texte contenu dans le cadre qui peut s'adapter à la taille voulue, autant en largeur qu'en hauteur. Pour vérifier, réduisez la taille de votre fenêtre.

Code XHTML

<div class="adapt1">
<div class="adapt2">
<div class="adapt3">
<div class="adapt4">
    Texte contenu dans le cadre qui peut s'adapter à la taille voulue, 
    autant en largeur qu'en hauteur. 
    Pour vérifier, réduisez la taille de votre fenêtre.
</div>
</div>
</div>
</div>

CSS :

/*Taille adaptable*/
div.adapt1,div.adapt2,div.adapt3, div.adapt4 {
    margin:0;
    background-repeat:no-repeat;
}
/* 
 * Div 1 : coin haut gauche
 * Comporte une couleur d'arrière plan
 * Bordures invisibles pour contrer un bug IE6
 */
div.adapt1{
    background-color:#5E0C3D;
    color:white; 
    background-image:url('images/coinhg.gif');
    background-position:top left;
    /*
     * Bordures invisibles : bug de IE
     * IE invente un padding en dessous sinon...
     */
    border:1px solid #DBF9F0;
}
/*
 * Autres div, contenant les coins
 * haut droit
 * bas droit
 * bas gauche
 */
div.adapt2{
    background-image:url('images/coinhd.gif');
    background-position:top right;
}
div.adapt3{
    background-image:url('images/coinbd.gif');
    background-position:bottom right;
}
/*
 * Contient le texte
 */
div.adapt4 {
    background-image:url('images/coinbg.gif');
    background-position:bottom left;
}

Images utilisées :
coin haut droit coin haut gauche coin bas droit coin bas gauche
La partie non bleutée des images est transparente (gif), pour s'adapter à la couleur de fond du cadre. Le bleu de l'image est le même que celui du fond de la page. Cependant des différences peuvent apparaître avec certains navigateurs. Pour éviter cela, on peut utiliser un fond de page blanc.

Exercice

Utilisez l'image suivante : image de bordure pour réaliser la bordure basse de la div tître de votre page.

Arrangez un peu l'affichage du formulaire en alignant à droite le texte dans les fieldset (text-align:right;), et centrez le bouton envoyer. Réduisez la taille des fieldset.

Résultat final