Réaliser un Background Très Créatif et Original pour votre Site

Posté le 01 mai 2012 par Ghilas BELHADJ | Laisser Un Commentaire

Nous allons dans ce tutoriel réaliser un arrière-plan assez surprenant, composé d’une image et un dégradé. On vas donner l’effet d’un changement d’arrière plan lors du scroll de la barre de défilement.

L’idée :

Nous allons nous servir d’une image transparente contenant des dessins avec deux couleurs distincts (sombre et claire). Je vais pour cet exemple utiliser l’image suivante :

Pictogramme Transparent

Lidée, c’est de pouvoir afficher les pictogrammes claire en mettant l’image sur un arrière plan sombre (de la même couleur que les picto sombres), et d’afficher les pictogrammes sombres en les mettant sur un arrière plan claire (de la même couleur que les picto claire).

Pictogrammes Par Dessus des Arrières-plan différents

Coté Pratique

Afin d’illustrer le changement de l’arrière plan du claire vers le sombre, je vais créer un dégradé, que je vais mettre à la fin de la page, comme ça, si le visiteur scroll jusqu’à la fin de la page, il verra son arrière-plan se changer au fur et à mesure:

Dégradé Gris Sombre vers Gris Claire

Découpage de l’arrière plan en vertical pour alléger l’image :

Découpage du degradé finale

Passons au code

HTML

Vous allez rapidement conclure que nous avons deux backgrounds (l’image et l’arrière plan), pour les contenir, on vas donc devoir les mettre dans des div différentes.

<body>
	<div id="picto">	
		<div id="page">
			<p>Contenu de la page</p>
		</div>
	</div>
</body>

body: vas contenir l’arrière plan en dégradé.
picto: vas contenir l’arrière plan en picto.
page: vas contenir le contenu de votre site.

CSS
C’est l’étape la plus important pour la création de ce genre d’arrière plan, on vas mettre en place dans un premier temps l’arrière plan en dégradé sur le tag body

body{
	background: url(img/bg.jpg) repeat-x left bottom #d3d3d3;
}

img/bg.jpg: c’est le chemin vers le dégradé.
repeat-x: permet de répéter le dégradé sur l’axe horizontale (l’axe des x).
bottom: permet de positionner le dégradé à la fin de la page
#d3d3d3: c’est la couleur de l’arrière plan sans le dégradé.

Maintenant, on vas mettre en place l’image picto.png qui sera « fixé » en bas de la feunêtre du navigateur.

#picto{
	background: url(img/picto.png) repeat-x left bottom fixed;
}

fixed: c’est le mot clé le plus important dans ce code, c’est lui qui permet de garder l’image fixé en bas.

Voir la Demo – Télécharger le Source

C’est la fin de ce tuto, j’epère qu’il vous a plu. Maintenant il ne vous reste plus qu’a faire preuve d’imagination pour créer vos propres images d’arrière plan, et les implémenter à votre site. N’hésitez pas à demander de l’aide dans les commentaires si vous avez le moindre problème.