Pour donner à votre site Web une apparence cool, des codes HTML d’arrière-plan à corps fixe peuvent vous permettre de peaufiner votre contenu. L’utilisation de ces balises CSS vous donne un contrôle ultime sur vos images d’arrière-plan.
Table des matières
CSS et codes HTML à fond fixe sympas
La création de feuilles de style en cascade a été aussi merveilleuse pour les concepteurs Web que le couteau l’était pour les trancheuses à pain. Soudainement, tous les aspects d’une page Web pourraient être contrôlés avec une précision au pixel près, et mieux encore, la façon dont les images d’arrière-plan étaient présentées pouvait également être contrôlée. En définissant la propriété « background » dans l’élément « body » de la feuille de style, l’aggravation de l’image de mosaïque a soudainement été résolue:
body {image de fond: url (YourBackGround.jpg);
couleur: #EEEEEE; couleur d’arrière-plan: #FFFFFF; }
Plus que de simples images
Il y a évidemment plus de parties à cela que le simple titre de l’image. En fait, la définition de CONTEXTE comprend plusieurs parties différentes:
- Contexte – C’est le raccourci pour toutes les propriétés d’arrière-plan, si vous ne voulez pas les définir toutes.
- Pièce jointe en arrière-plan – Ceci est soit fixe, soit défilant, ce qui détermine si l’image d’arrière-plan de la page (ou la cellule du tableau ou le bloc de texte) se déplacera avec le bloc ou non lorsque la page défilera vers le haut ou vers le bas.
- Couleur de l’arrière plan – Ceci est explicite, bien que CSS améliore le HTML en permettant à l’hexadécimal, au RVB ou même simplement à la syntaxe (« rouge ») de définir la couleur.
- Image de fond – Il s’agit d’un lien relatif vers l’image qui sera placé par le code CSS.
- Position d’arrière-plan – Cette qualité permet à l’image d’être placée n’importe où sur la page – vous n’êtes plus limité à commencer dans le coin supérieur droit! En utilisant des pourcentages, l’image peut être placée exactement là où la mise en page l’exige.
- Répétition du fond – Une fois l’image placée, vous pouvez déterminer si elle se répétera du tout, et si oui, si elle se répétera horizontalement, verticalement, ou les deux (en optant pour un effet «mosaïque» à l’ancienne).
Codage d’arrière-plan True Ninja
Il existe plusieurs façons de définir toutes ces propriétés dans CSS. Une façon serait de définir chaque qualité individuellement:
<divstyle="background-image:url(/harddrive/YourGraphic.jpg); background-repeat:no-repeat; background-attachment:scroll; background-position:45%70%;> </div>
Cependant, le « raccourci » mentionné ci-dessus le rend encore plus facile, car chaque qualité peut être définie l’une après l’autre simplement en invoquant la balise « BACKGROUND ». Par exemple, le code ci-dessus pourrait être écrit sur une seule ligne:
<divstyle="background:url(harddrive/YourGraphic.jpg)no-repeatscroll45%70%;>
C’est ce que l’on appelle du code «bien formé», et s’il est défini dans votre feuille de style, vous pouvez obtenir encore plus de contrôle sur l’ensemble de votre site.
Apprendre encore plus
Pour plus d’informations, regardez les autres articles CSS et HTML sur Supportivy, et bientôt votre site Web ressemblera exactement à ce que vous voulez, avant et arrière-plan.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
