J'ai lu très brièvement cette conversation et me permet d'intervenir car ce sujet me passionne et peut-être pourrais-je apporter 2 3 éléments de réponses.
Bien que l'arrière plan d'un site (background) est de plus en plus en proie de devenir un outil marketing (parce qu'il propose un large espace publicitaire à grande visibilité à l'image de site comme deezer ou allociné), ce n'est pas pour autant que les éléments de réponse au sujet de sa construction fuse sur google ou les autres moteurs de recherche : à moins que je ne sache pas trouver les bons mots clés.
Personnellement j'éviterais la solution javascript et toute logique de redimensionnement d'image (automatique ou non). Par respect pour sa dimension une image n'est pas fait pour être redimensionner; je plaisant à moitié mais j'ai trouvé ignoble le résultat de redimension de l'arrière plan avec la photo des maisons en démo de la solution jquery
http://bavotasan.com/demos/fullbg/.
De plus, d'expérience de bidouilleur graphique, je me suis aperçu que : plus on redimensionné de façon à agrandir une image non vectoriel, plus les pixels commençaient à apparaître, baver... appeler ça comme vous voulez mais sachez que l'image devenait de plus en plus flou et ce, sans effet photoshop.
Pour revenir au sujet de base qu'est le background comme solution marketing.
Si on évoque une solution de site au design élastique (qui s'adapte à la taille de la fenêtre de votre explorer), je conseille de créer un background marketing en plusieurs parties.
Exemple, une DIV de part et d'autre de votre DIV conteneur de votre site et pourquoi pas une DIV en haut de votre conteneur.
Si le design de votre site est statique (pas de redimensionnement de contenu), je conseille de jouer sur les couche de votre design, pas forcément en passant par les z-index mais tout simplement en incluant votre DIV conteneur de votre site dans une DIV plus grande qui aura pour arrière plan votre image arrière plan marketing.
Cette image sera créer surtout en tenant compte des dimensions width du conteneur de votre site (du width de votre DIV contenant votre site à l'intérieur de celle contenant votre image d'arrière plan si vous me suivez toujours)
Exemple d'un site avec une largeur fixe de 900px. Disons que nous souhaitons afficher à droite et à gauche du DIV conteneur du site un espace de100px avec un arrière plan.
Du côté html
<div id='background'>
<div id='site'></div>
</div>
#background{
width:1100px;
background:url(votre_background_de_1100px.png) top left;
margin-left:auto;
margin-right:auto;
}
#site{
width:900px;
background:white;
margin-left:auto;
margin-right:auto;
}
Dans cette exemple votre arrière plan sera visible de 100px sur la droite et 100px sur la gauche. A vous de le créer en conséquence avec une image de 1100px ayant une zone de 0 à 100px avec du contenu graphique, de 100px à 1000px ayant un fond transparent (pour ne pas avoir une image trop lourde au chargement en terme de taille), et de 1000px à 1100px avec un contenu graphique.
Le margin-right:auto et margin-left:auto dans le css de la DIV site est important car il permet de ne pas confondre le bord gauche de celle-ci sur le bord gauche de votre DIV background et ainsi de ne pas empiéter sur l'image d'arrière plan et donc de rendre visible la partie de 100px à gauche de votre_background_de_1100px.png dans notre exemple.
En jouant sur les marge et les position on peut graphiquement habillé l'image votre_background_de_1100px.png sur le haut et faire descendre la DIV #site de quelque px pour rendre visible le haut de votre image.
Dans cette exemple la programmation html de votre page reste le même. Seul la feuille de style change.
#background{
width:1100px;
background:url(votre_background_de_1100px.png) top left;
margin-left:auto;
margin-right:auto;
}
#site{
width:900px;
[b]position:relative;
top:100px;[/b]
background:white;
margin-left:auto;
margin-right:auto;}
A noter que la solution de créer un arrière plan en plusieurs parties et toujours possible.
Il y a 1000 combines pour faire apparaître un beau design marketing, que ce soit dans l'arrière plan que sur les éléments graphiques constituant votre site.
Au sujet de la "cliquabilité" (enfin de rendre cliquable
) votre arrière plan, j'irais voir cette fois-ci du côté de javascript mais il y a là encore plusieurs possibilités.
Si votre background est en plusieurs DIV (solution vite évoquée précédemment) :
grossièrement une DIV en haut de votre DIV site avec une image d'arrière plan, une DIV à droite de votre DIV site en float ou en display inline-block avec une image d'arrière plan, une DIV à gauche de votre DIV site en float ou en display inline-block avec une image d'arrière plan.... reconsidérer l'idée d'image en position d'arrière plan. Créer tout simplement une DIV en haut, à droite et à gauche de votre DIV site contenant une image cliquable (balise IMG entourer de balise A)
Ou bien une solution qui marche quelque soit les cas possible, dont ceux évoqué précédemment (solution universelle
) et pour laquelle j'obte et la solution javascript. De plus en plus vu, le javascript est activé par défaut dans les navigateurs. Enfin quand je dit javascript c'est rapide, pour être plus précis c'est une solution AJAX mêlant HTML et javascript avec la bibliothèque jquery.
La solution et <<d'écouter>> (c'est un terme utiliser dans javascript et bien d'autre langage) le clique sur un élément DOM de la page (une balise DIV par exemple). Cela revient à dire savoir quand l'utilisateur a fait tel ou tel action, exemple : cliqué sur une DIV. Par la suite il est possible de déclencher une action (appelé fonction) qui sera par exemple allez sur le site pour lequelle mon arrière plan fait la pub.
Un dernier petit exemple HTLM + jquery:
<div id='background'></div>
<script type='text/javascript'>
$(document).ready(function(){
$('#background').bind('click',function(){
// on a créer un écouteur sur l'élement DIV background pour l'évènement click
window.location="URL DU SITE";
//on ouvre le site ayant pour adresse URL DU SITE (c'est pas malin [ravi])
});
});
</script>
Lorsque que l'utilisateur cliquera sur la DIV ayant pour id background, le site ayant pour url URL DU SITE s'ouvrira.
Voilà, si vous avez des questions n'hésitez pas.
J'espère m'être rendu clair et pertinent.
Bonne chance dans ce WEB 2.0 où l'utilisateur et acteur et cible principal, ce WEB marketing à souhait
Modifié par Yann J. ShowGoom (20 Jan 2011 - 06:26)
, mais je rencontre un petit problème avec le background car il passe par dessus le site: