Skip to main content Help Control Panel

Cybermedium

webdevelopper
webdesigner
webmaster

Code HTML/CSS pour afficher une image de fond proportionnée

Home Téléchargez

Voici comment j'ai mis en place l'image de fond dans mon thème Fullscreen pour le CMS Yacs.

J'ai trouvé cette solution sur english flag css-tricks.com, qui propose d'ailleurs maintenant une solution toute simple en CSS3 (mais qui ne me permettrait pas de faire les transitions en mode diaporama).

Partie HTML, à mettre en fin de page, deux balises div et une table unicellulaire contenant l'image :

<div id="bg">
 <div>
  <table cellpadding="0" cellspacing="0">
   <tbody><tr><td>
    <img alt="" src="votreimage"/>
   </td></tr></tbody>
  </table>
 </div>
</div>

Partie CSS (pour une image centrée) :

html,body {
    width:100%;height:100%;
    margin:0px;padding:0px;
}
#bg, #bg table, #bg td {
    height:100%;width:100%;
    overflow:hidden;
}
#bg {position: absolute;} /* or fixed */
#bg div {
    position:absolute;
    top:-50%;left:-50%;height:200%;width:200%;
}
#bg td {text-align:center;vertical-align:middle;}
#bg img {min-height:50%;min-width:50%;}

Il faut ensuite positionner le contenu de votre site en absolu par dessus la balise #bg, avec un z-index supérieur.

Notez qu'en utilisant YACS et le thème Fullscreen, vous aurez beaucoup d'autres fonctionnalités comme :

  • attribuer un fond différent à une page du site ;
  • attribuer un fond différent à une branche du site ;
  • aligner les images au centre ou suivant une bordure ;
  • attribuer une légende aux images ;
  • faire défiler une série d'images en diaporama.
JJ
on Mar. 4 2013 at 09:29 pm GMT

Bonjour,

le tuto css-tricks a hangé d'url, c'est maintenant à http://css-tricks.com/perfect-...ckground-image/

JJ

Alexis Raimbault - on Mar. 14 2013 at 12:54 pm GMT
Changement intégré, merci !
photo
webdesign templating by webmaster Alexis Raimbault