Informatique


Couleurs et une images de fond

Aller à

Généralités

Pas de chichi, on oublie backround-image et background-color et on utilise plus simplement background.

Tout élément de type block peut recevoir un fond avec la propriété background, cette propriété n'est en aucun cas réservée au body!


Une couleur de fond

Il suffit de préciser une couleur avec l'une des méthodes suivantes:

  • en hexadécimal par #FF0000
  • en rgb par rgb(255,0,0)
  • en rgba par rgba(255,0,0,1)
  • en hsl par hsl(45,211,143)
  • en hsla par hsla(45,211,143,1)
  • avec le nom de la couleur par red

Démo
	<style>
		.fond1	{
				background:rgba(255,200,200);
			}
	</style>
	</head>
	<body>
		<div class="fond1">Une couleur de fond...</div>
	</body>

Une image de fond en mozaïque

Il suffit de préciser l'adresse d'une image que l'on peut répétée pour former une mozaïque. Celle-ci est répétée selon X et Y.

Démo
	<style>
	body	{
		background:url(../../image/back.jpg);
	}
	</style>
	</head>
	<body>
		<p>
		En voilà un beau fond en mozaïque...
		</p>
	</body>

Une image de fond non répétée

Voilà plus compliqué, il s'agit de charger une image, d'empêcher sa répétion et de la positionner sur la page.

Dans l'exemple j'utilise la forme condensée (usage recommandé!), celle-ci peut être éclatée en plusieurs styles.

  • l'adresse de l'image
  • le choix de la répétition (repeat, no-repeat, repeat-x, repeat-y)
  • le positionnement: il se donne par deux valeurs
    • numériques en px, qui donnent respectivement la position selon X et Y (par exemple 20px 30px)
    • numériques en %, qui donnent respectivement la position selon X et Y (par exemple 5% 10*)
    • alphabétiques (valeurs autorisées: left, top, right, bottom, center)
Démo
	<style>
	body	{
		background:url(../../image/proudhon.jpg) no-repeat left top;
	}
	</style>
	</head>
	<body>
		<p>Pierre-Joseph Proudhon, le papa de l'anarchie.</p>
	</body>

Une image de fond non répétée sur une couleur de fond

On a 4 paramètres pour background:

  • la couleur de fond (méthode au choix)
  • l'adresse de l'image
  • la répétition
  • le positionnement

Démo
	<style>
		body	{
		background:rgba(220,220,220,1) url(../../image/proudhon.jpg) no-repeat  right bottom;
		color:red;
	</style>
	</head>
	<body>
		<p>Pierre-Joseph Proudhon, le papa de l'anarchie.</p>
	</body>

Une image de fond non répétée sur une couleur de fond qui suit ou pas le srolling

On a 5 paramètres pour background dont le quatrième précise si le fond est fixed ou scroll.

On a 5 paramètres pour background:

  • la couleur de fond (méthode au choix)
  • l'adresse de l'image
  • la répétition
  • fixé ou avec scrolling (fixed ou scroll)
  • le positionnement

Démo
	<style>
		body	{
		width:400px;
		height:1500px;
		overflow:scroll;
		background:rgba(220,220,220,1) url(../../image/proudhon.jpg) no-repeat fixed left top;
		}
	</style>
	</head>
	<body>
		<p>Pierre-Joseph Proudhon, le papa de l'anarchie...</p>
	</body>

Un fond qui s'adapte à la taille de la fenêtre

Certains sites affichent une image de fond qui s'adapte au redimensionnement de la fenêtre du navigateur, proportionnellement, sans la déformer.

Préparation de l'image de fond

L'image de fond doit respecter les règles suivantes :

  • un format rectangulaire: 2000px * 1300px (par exemple)
  • le poids de l'image doit être optimisé afin de garantir un temps de chargement correct

On suit la démarche suivanre:

  • l'image est chargée, on ne veut pas de répétition, le fond est fixé, elle est centrée verticalement et horizontalement
  • on place background-size à la valeur cover ou auto (il existe d'autres valeurs possibles!)

Remarque:
cover permet d'adapter l'image à la fenêtre en toutes circonstances.
auto permet de garder la taille initiale de l'image et d'ensuite l'adapter à la taille de la fenêtre.

Démo
	<style>
		body { 
		background: url(../../image/cervin.jpg) no-repeat fixed center center ; 
		background-size: cover;
		}
		p {
		color:white;
		}
	</style>
	</head>
	<body>
		<p>
			La redimension n'a pas d'effet "dévastateur", l'image garde des relations
			parfaites entre sa hauteur et sa largeur...
		</p>
	</body>

Plusieurs images de fond

Indispensable à votre survie sur le net, outil de mise en page particulièrement pratique.

La propriété background accepte plusieurs définitions de fond, elles sont séparées par des virgules.

Un premier exemple

Un grand classique, on veut une image aux 4 coins de la page.

Démo
	<style>
	body	{
		background:url(../../image/isa.png) no-repeat left top,
				url(../../image/ferb.png) no-repeat right top,
				url(../../image/phineas.jpg) no-repeat left bottom,
				url(../../image/doof.jpg) no-repeat right bottom;
				}
		p	{
		margin:250px;
		}
	</style>
	</head>
	<body>
		<p>C'est beau hein ?</p>
	</body>
Un deuxième exemple

Le grand classique précédent délicatement posé sur fond gris.

Démo
	<style>
	body	{
		background:url(../../image/isa.png) no-repeat left top,
		url(../../image/ferb.png) no-repeat right top,
		url(../../image/phineas.jpg) no-repeat left bottom,
		url(../../image/doof.jpg) no-repeat right bottom,
		rgba(230,230,230,1);
		}
		p	{
		margin:250px;
		}
	</style>
	</head>
	<body>
		<p>C'est beau hein ?</p>
	</body>
Un troisième exemple

Le grand classique précédent délicatement posé sur fond mozaïque.

Démo
	<style>
	body	{
		background:url(../../image/isa.png) no-repeat left top,
		url(../../image/ferb.png) no-repeat right top,
		url(../../image/phineas.jpg) no-repeat left bottom,
		url(../../image/doof.jpg) no-repeat right bottom,
		url(../../image/back.jpg);
		}
		p	{
		margin:250px;
		}
	</style>
	</head>
	<body>
		<p>C'est beau hein ?</p>
	</body>

En résumé

On utilise préférentiellement l'écriture condensée, chaque paramètre est optionnel mais l'ordre dans lesquels ils sont écrits est important:

  • la couleur de fond
  • l'url de l'image de fond
  • la répétition et son sens
  • l'attachment, c'est scroll par défaut
  • la position, elle est donnée par 2 valeurs