Langage CSS : Propriété BACKGROUND-IMAGE pour placer une image en fond de page /08b

C S S
Feuilles de style

Propriété background-image
"image en fond de page"

Page - 08b

background-image pour feuilles de style

Image dans un fond de page

La propriété background-image sert à placer une image en fond de la page ou en fond de texte d'un ou plusieurs éléments. on dit aussi qu'elle sert à spécifier "l'image d'arrière-plan". En même temps qu'une image, il est fortement recommandé aussi de spécifier une couleur normale d'arrière-plan, qui sera utilisée en remplacement d'une image indisponible.

body { background-image: url("aimages/v178.jpg" }

Dans ce fichier j'ai placé une image "v178.jpg" à partir de mon sous-dossier "aimages", qui correspond à l'image de fond de cette page.

Image de fond de page

Songez en choisissant une image pour votre fond de page à son poidsqui va influencer la durée de chargement chez votre visiteur. Plus léger vous choisissez mieux ça ira: 5 Ko c'est déjà pas mal même si avec l'ADSL ou autre ça roule mieux! L'idéal quand le contenu le supporte c'est de garder la même image pour le plus grand nombre de pages possibles et bien sûr en conformité avec votre contenu. D'une part une fois chargée elle est disponible immédiatement pour la suite des fichiers et d'autre part votre site ne ressemble pas à une bande dessinée ou un sapin de Noël avec en plus peut-être des gifs animés qui s'agitent un peu partout.

Surtout n'oubliez pas d'harmoniser les couleurs de l'image de fond de page avec votre texte, afin que ce dernier reste bien lisible.

Code 1 dans HEAD

</TITLE>
<style type="text/css">

body
{
background-image: url("aimages/v178.jpg")
background-color: #FFFFFF ;
}
.boite
{
background-image: url("aimages/v371.jpg") ;
border: solid 2px #990000 ;
margin-left: 250px ;
width: 200px ;
height: 150px ;
background-color:#FFFFFF ;
}
</style>

<BODY BGCOLOR="#FFFFFF" >

Résultat exemple 1

Il est sous vos yeux avec ce fond de page clair de 3 Ko.

Remarque

Naturellement vous avez indiqué le chemin d'accès de cette image qui se trouve théoriquement dans votre répertoire local et attention : dans le code n'oubliez pas les guillemets ni les parenthèses et pas d'espace entre "url" et la parenthèse qui suit.

N'oubliez pas d'incorporer background-color (ici #FFFFFF) dans votre code CSS et aussi dans la ligne BODY en HTML, pour fixer une couleur approchante à celle du fond d'image, au cas où le navigateur du visiteur par exemple n'accepterait pas le CSS ou n'arriverait pas à charger votre image de fond. Pensez au résultat imprévu que donnerait par exemple votre beau contenu préparé avec une couleur d'image noire et un texte blanc, qui se retrouverait sur un fond blanc avec le texte devenu forcément invisible.

Lorsque l'image définie est plus grande que la page, elle a les bordures "rognées", alors que si elle est plus petite elle est répétée jusqu'à remplir la page en partant du coin supérieur gauche jusqu'au bord inférieur droit.

Mais égalemment lorsque vous définissez une image d'arrière plan, il est possible d'en déterminer sa répétition ou encore son défilement suivant des propriétés qui sont abordées pages suivcantes.

Fond de page pour élément dans la page

Code 2 dans BODY

<P align="center" class="boite">Fond de page avec une image, dans un élément (boîte) <br> qui est symbolisé ici par un léger cadre de 2px marron.(avec "border")</P>

Résultat exemple 2

Fond de page avec une image, dans un élément (boîte)
qui est symbolisé ici par un léger cadre de 2px marron.(avec "border")

Sommaire CSS ... @ ... Répétition d'une image horizontalement