Facbook viewat  Flickr
Accueil du site > Astuces > CSS : Mettre une image en background sur tout le site

CSS / XHTML

CSS : Mettre une image en background sur tout le site

2 votes

Publié le mercredi 22 décembre 2010

L’utilisation d’image en arrière plan d’une page web permet de proposer des interfaces plus élégantes adaptées à la plupart des écrans. Voyons comment y parvenir.

Dans l’exemple ci dessous, nous utilisons un calque css   qui contient l’image d’arrière plan du site. La subtilité consiste à retirer l’habillage standard du site et ses contenus afin de diminuer le poids de l’image contenant le background du site.

  • Il faut donc en tout premier lieu définir le body dans la feuille CSS   :
body
{
        background-color: #ffffff;
        margin:0px;
        padding:0px;
}
  • Il faut ensuite définir le calque conteneur global qui contiendra notre image d’arrière plan :
#conteneur_global
{
        background-color: #ffffff;
        background-image:url(images/fond2.jpg);
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: center top;
        width: 100%;
        height: 100%;
}
  • Enfin voici le calque Main qui contient l’intégralité du contenu du site :
#main
{
        width:1120px;
        margin: 0px auto 0px auto;
        border: 0px solid #f0f0f0;
}

L’image fond2.jpg fait en réalité 2280 px de large sur 1392 px de haut et ne pèse que 71 Ko.

Toute l’astuce réside ensuite à caler tous les élements en CSS   aux picels près dans le déoupage en CSS  

Portfolio

mise en page avec image en fond de page Gabarit css simple de mise en page CSS avec image en fond d'écran sur (...) Image de fond d'écran du site

Répondre à cet article

Plan du site | Contact | Suivre la vie du site RSS 2.0