Accueil    Codes    Arrière plan adaptable
 



Retour haut de page fluide  Arrière plan adaptable




Présentation



Ce code permet de déclarer sur l'élément body de la page un arrière plan qui s'étirera sur l'ensemble de l'écran de façon propre. Il se base sur quelques propriétés css dont la propriété css3 background-size.

Voici un exemple de mise en place d'un arrière-plan adaptable :
Exemple de background adaptable


Implémentation de l'arrière-plan adaptable



Il suffit simplement d'implémenter le style associé à l'élément body (classe ou style) avec le code CSS suivant :


<style type="text/css">
body{
   background-image:url(mon-image.png);
   background-attachment:fixed;
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
</style>


Cette déclaration peut être condensée en une ligne sur la propriété globale background. L'image d'arrière plan est centrée horizontalement et verticalement, positionnée de façon fixe et est étendue sur toute la longueur grâce à l'attribut "cover" de la propriété css background-size.