Un arrière-plan extensible intelligent

Astucedesign

Publié par le , mis à jour le (776506 lectures)

design background adaptable étirable

Certains sites affichent une (grande) image de fond qui s'adapte à toutes les dimensions de la fenêtre du navigateur, proportionnellement, sans la déformer. La réalisation de ce genre de prouesse n'est pas si évidente techniquement, contrairement à ce que l'on pourrait croire de prime abord.

Perfect background

Comment fait-on ? Nous allons présenter ici deux méthodes parmi celles qui sont possibles : une entièrement en CSS , une autre basée sur jQuery.

Exemples

Pour avoir un aperçu de ce que l'on veut obtenir, voici quelques exemples utilisant ce principe :

Simon et Comet des projets plein la tête
Simon & Comet

Flavors
Flavors me

Restaurant
Piz'za-za

Le point commun de tous ces sites est la mise en avant de leur background : il est fixe et c'est la pièce maîtresse de leur design. Le choix de celui-ci est donc particulièrement réfléchi et soigné.

Le principe

Comme vous venez de le remarquer, ce n'est pas qu'une simple image de fond qui s'adapte à la fenêtre : il n'y a aucune déformation, le ratio est toujours conservé et lorsque la fenêtre est vraiment étroite le fond est recadré.

On est donc loin de ce résultat simpliste qui se contente d'étirer l'image à 100% de son conteneur.

Préparation de l'image de fond

L'image de fond doit respecter quelques règles basiques :

  • Format rectangulaire pour la plupart des écrans : 2000px * 1300px (par exemple)
  • Le poids de l'image doit être optimisé pour ne pas ralentir considérablement le chargement

Sous Photoshop, après avoir créé votre image de fond (photo, création graphique…) rendez-vous dans "Fichier" -> "Enregistrer pour le web…".

Enregistrer pour le web et les périphériques

Dans la fenêtre qui vient d'apparaître, vous trouverez un curseur qui permet de faire varier la qualité de l'image et donc son poids final. A vous de trouver le bon compromis qualité/poids.

Réglage de la qualité

Après enregistrement, l'image est prête à l'emploi !

La méthode CSS3

Le code HTML

Rien de plus épuré : c'est une page html totalement vierge reliée à une feuille de style CSS.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">		
  <title>Fond extensible - version CSS</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen"/>		
</head>
<body>
...		
</body>
</html>

Le code CSS

Nous allons simplement appliquer une image de fond sur la balise <html> (ou <body> au choix), retirer les marges, et utiliser la propriété CSS3 background-size et sa valeur cover. C'est tout !

html { 
  margin:0;
  padding:0;
  background: url(image/bg.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

Voir le résultat

Avantages :

  • Full CSS : séparation du fond de la forme complète
  • Extrêmement simple à mettre en place

Inconvénient :

  • Ne fonctionne pas sur Internet Explorer <= 8 et les très anciennes versions des navigateurs tels que Firefox 3.0.

La méthode jQuery

Le code HTML

Nous allons partir du même document que la méthode précédente, en y ajoutant ces élements :

  1. Un élément <img> contenant l'image de fond
  2. Une feuille de style différente
  3. deux éléments <script></script> pour intégrer jQuery et le script de gestion du background
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fond extensible - version JQUERY</title>
  <link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>

<body>
  <img src="image/bg.jpg" class="superbg" />
  <script src="script/jquery.js" type="text/javascript"></script>
  <script src="script/background.js" type="text/javascript"></script>	
</body>
</html>

Le code CSS

Nous "fixons" et plaçons l'image pour qu'elle ne soit pas perturbée par le scroll (défilement).

img.superbg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}

Le code jQuery

Tout est en place pour que jQuery puisse s'amuser avec cette image. Dans le principe, nous allons créer une fonction qui va calculer le ratio de la fenêtre du navigateur pour redimensionner l'image. Cette fonction sera appelée dès le chargement de la page et à chaque redimensionnement de la fenêtre.

function redimensionnement(){ 
 
    var $image = $('img.superbg');
    var image_width = $image.width(); 
    var image_height = $image.height();     
     
    var over = image_width / image_height; 
    var under = image_height / image_width; 
     
    var body_width = $(window).width(); 
    var body_height = $(window).height(); 
     
    if (body_width / body_height >= over) { 
      $image.css({ 
        'width': body_width + 'px', 
        'height': Math.ceil(under * body_width) + 'px', 
        'left': '0px', 
        'top': Math.abs((under * body_width) - body_height) / -2 + 'px' 
      }); 
    }  
     
    else { 
      $image.css({ 
        'width': Math.ceil(over * body_height) + 'px', 
        'height': body_height + 'px', 
        'top': '0px', 
        'left': Math.abs((over * body_height) - body_width) / -2 + 'px' 
      }); 
    } 
} 
      
$(document).ready(function(){

    // Au chargement initial   
    redimensionnement();
     
    // En cas de redimensionnement de la fenêtre
    $(window).resize(function(){ 
        redimensionnement(); 
    }); 
 
}); 

Voir le résultat

Avantage

  • Fonctionne partout, pour peu que JavaScript soit activé.

Inconvénients

  • Alourdit encore plus le poids de la page (chargement de la librairie jQuery)

Conclusion

Cette méthode peut apporter une touche plutôt sympa dans votre design. N'hésitez pas à faire un tour sur cet article qui propose des méthodes supplémentaires.

Commentaires

Une solution full-css n'est pas possible en utilisant les pourcentages ??
À noter qu'une image placée directement dans body est invalide en XHTML 1.0 Strict.

Sinon, en CSS 2 avec une simple balise image :

#image-de-fond {
left: 0;
min-height: 100%;
position: fixed;
top: 0;
width: 100%;
z-index: -999;
}

Merci du tuto !

Je rajouterai qu'avec la librairie Modernizr, il doit être possible d'appliquer ce code javascript en cas de non support de background-size.

J'ai pas tester mais avec un truc du style :

if(!Modernizr.backgroundsize){
// ...
}

Je souhaiterai améliorer ce code pour faire en sorte que si l'utilisateur visite mon site sur iphone, le fond d'écran ne soit pas chargé (cela risquerait de consommer le forfait de l'utilisateur en 3g...) Voici mon code css, qui lui utilise body (je ne sais pas pourquoi celui-ci utilise html...

body {
margin:0;
padding:0;
background: url(fond.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}

@media screen and (max-device-width: 480px) {
body {
background: none;
}
}

La vraie question est de savoir si le fond d'écran est chargé ou juste non affiché sur l'iphone...
Help !
Merci

@Mafrayss : l'image est forcément chargée d'abord puisque tu ne lui dis pas le contraire.
Pour éviter de charge l'image, il faudrait indiquer une requête de type @media screen and (min-device-width: 480px)...

Super petit tuto très efficace. Par contre, petite question (très bête certainement) : j'ai mis en place la version Jquery sur mon site, mais ça redimensionne toutes les images... mêmes des petites vignettes.
Comment faire pour éviter cela svp ?

Même sur Opera Desktop on voit apparaître des bandes blanches légères sur les bords non ?

En revanche sur FF c'est parfait.

Bonjour, j'ai essayé en local avec easyphp avec css3 ça ne fonctionne pas et ça destructure ma présentation et la méthode Jquery laisse juste apparaître l'image mais mon corps de site se trouve repousser par le bas comme si le script js n'avait pas prise sur l'image. Si quelqu'un à une idée pour le Jquery en ce qui me concerne je serai prenant. Merci pour votre aide.

Bonjour,
ma question est sûrement stupide mais je suis débutante dans la programmation de site web. J'aimerais beaucoup utiliser votre script mais malheureusement je ne sais pas où insérer le Jquery.

Entre les premières balises <script></script> ou sur une autre page?

Merci pour votre aide.

Merci pour ce tutoriel. Je n'arrivais qu'à placer une image de fond qui se répétait jusqu'à présent alors qu'il suffit de donner l'ordre "no-repeat center fixed; " !

Pour une complète compatibilité avec navigateur android, ajoutez height:100vh; au modèle css. vh étant la hauteur visible de l'affichage.

Bonjour , merci pour tout tes tuto tous les plus fou les uns que les autre . Cependant j'ai un petit souci je voudrais adapter un gif integrer à mon site (pas en arrière plan mais juste après le header ) pour qu'il soit bien dimensionné aussi bien en version mobile qu'en version bureau actuellement en version mobile il est parfait mais en version bureau il n'est pas du tout adapter en faite il ne prend pas la largeur . Ou même au pire si je peut le rendre visible uniquement sur mobile.