Tutorial jQuery : ajouter une image de fond qui se redimensionne dynamiquement

Pour un retour en douceur des tutoriels, je te propose aujourd’hui un tuto pour ajouter une image de fond qui se redimensionne dynamiquement à un site web.

Pour faire cela, nous allons utiliser le plugin jQuery Backstretch.  Ce plugin est surtout utile pour faciliter la mise en place sur tous les navigateurs (et oui, cela change d’un navigateur à l’autre).

Comme pour les autres turoriels jQuery, j’ai préparé une démo.

Voir la démo du tutorial

Pour le code, cela va aller très vite. Tu prépares ta structure HTML, ton CSS. Ensuite tu ajoutes jQuery et le plugin jQuery Backstretch aux pages voulues :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>

Enfin, tu ajoutes le bout de code qui change tout : l’initialisation du plugin jQuery :

// initialisation du plugin jQuery
$.backstretch('http://blog.arnaud-k.fr/demos/jquery-backstretch/img/bg-3.jpg');

Et pour aller encore loin, j’ai ajouté, sur la démo, une liste déroulante qui permet de changer en live le fond. Tout d’abord, le select (avec, en valeur pour chaque option, le nom des images) :

<select name="change-bg" id="change-bg">
    <option value="bg-1">New York City</option>
    <option value="bg-2">Auckland</option>
    <option value="bg-3" selected="selected">Île de Waxholm (Suède)</option>
</select>

Il ne reste plus qu’à ajouter le listener pour le select :

$('#change-bg').change( function(){
	// changement du fond d'écran en fonction de la valeur du select
	$.backstretch('http://blog.arnaud-k.fr/demos/jquery-backstretch/img/'+$(this).val()+'.jpg');
});

Pour l’utilisation de ce style de design, il faut garder en tête l’optimisation des images de fond, il y a un compromis à trouver. En effet, il faut qu’elles soient suffisamment grandes pour ne pas qu’elles soient trop agrandies et suffisamment légères pour ne pas surcharger le site.

Ce contenu a été publié dans HTML / CSS, JQuery, avec comme mot(s)-clé(s) , , , . Vous pouvez le mettre en favoris avec ce permalien.

5 reponses a Tutorial jQuery : ajouter une image de fond qui se redimensionne dynamiquement

  1. Guillaume dit :

    Merci ce sera utile 😀

  2. Ping : Les webdesigns de la semaine #5 : spécial sport et jQuery ! | JQuery, PHP, html, design… // arnaud-k : un blog de geek

  3. fred dit :

    Bonjour
    Pourquoi vous dites que l’image se redimensionne ?
    Puisque l’image est tronquée quand je modifie la largeur du navigateur ! (arbre droite coupé)
    Si elle devait se redimensionner on devrait la voir en totalité mais à l’échelle, non ?
    Seriez vous prêt à relever le défi de faire la même chose sur une image de fond de div ?

    Bravo pour votre site.

  4. Diwali is the queen of all festivals. It unites the clan of our region as clan from all religions of India commend it with degree fanaticism frenzy|enthusiasm}. Being one of the most old festivals of our region, diwali holds a stalwart traditional and emotional value for every Indian. There are several traditions connected to diwali which are practiced every year on this fortunate feast. Wearing new dress, cleaning residence and offices, praying to lord Ganesha and goddess Lakshmi ji, lighting diyas and candles followed by exchanging gifts with loved ones are public diwali rituals. But the most uphill task out of all the rituals I just mentioned is the contribution part as we often get confused about deciding the completed diwali gifts for our dear and near ones.

  5. Larissa dit :

    hello!,I li e ou iting so so much!share we keep in tou h mor bout your o t n OL?I requir an exp rt on th s space to unr vel my rοblem. May be that s u! a ing loo ah d to se you.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *