Médiaforma

All posts tagged background

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Que diriez-vous d’utiliser une image en arrière-plan des cellules d’un tableau ?

Il n’y a rien de compliqué là-dedans : utilisez simplement l’attribut background à la place de l’attribut bgcolor et indiquez le nom de l’image GIF, JPG ou PNG à utiliser. Ici par exemple, nous utilisons l’image miniature.jpg, qui se trouve dans le même dossier que le code HTML.

Afin de mettre en évidence la répétition de l’arrière-plan, la première cellule a été redimensionnée à 300×200 pixels. La cellule suivante aura la même hauteur. Sur la deuxième ligne du tableau, la hauteur de la première cellule a été fixée à 200 pixels. Cette hauteur sera également celle de la deuxième cellule.

L’image utilisée en arrière-plan est de petites dimensions : 100 x 75 pixels. Comme vous le voyez, elle se duplique autant de fois que nécessaire pour couvrir toute la surface du tableau.


Par défaut, l’arrière-plan des pages Web est uniforme et de couleur blanche. Pour choisir une autre couleur uniforme, il vous suffit de définir l’attribut bgcolor dans la balise <body> :

<body bgcolor=”#RRVVBB”>

RR, VV et BB représentent les composantes rouge, vert et bleu de la couleur, codées en hexadécimal. Pour vous aider à obtenir ces trois composantes, je vous suggère de vous connecter sur la page http://www.raider-knight.com/generateur-couleur.php. Sélectionnez une couleur avec le curseur vertical et cliquez dans la palette.

Il ne vous reste plus qu’à copier/coller le code hexadécimal obtenu  dans l’attribut bgcolor de la balise <body> :


Dans certains cas, vous souhaiterez répéter l’image d’arrière-plan horizontalement, mais pas verticalement, verticalement mais pas horizontalement ou encore ne pas la répéter du tout. Pour arriver à cela, vous devez ajouter l’attribut style dans la balise <body> et utiliser la propriété CSS background-repeat. La syntaxe à utiliser est la suivante :

<body background="image.jpg" style="background-repeat:style;">

style représente la valeur affectée à la propriété background-repeat. Vous pouvez choisir :

  • repeat pour répéter l’image horizontalement et verticalement. Etant donné que l’attribut background produit cet effet par défaut, cette valeur n’est jamais utilisée.
  • repeat-x pour répéter l’image horizontalement mais pas verticalement.
  • repeat-y pour répéter l’image verticalement mais pas horizontalement.
  • no-repeat pour ne pas répéter l’image.

Voyons l’effet des trois dernières valeurs. Comme vous pouvez le constater, repeat-x répète l’image horizontalement mais pas verticalement, repeat-y répète l’image verticalement mais pas horizontalement et no-repeat ne répète pas l’image.


Que diriez-vous d’insérer une image d’arrière-plan sur une page ? Pour cela, il suffit d’insérer l’attribut background dans la balise <body> et de préciser le chemin de l’image gif, jpg ou png à utiliser.

Ici, l’image se trouve dans le même dossier que le document et a pour nom chien.gif. Comme vous le voyez, elle est répétée autant de fois que nécessaire pour couvrir toute la surface occupée par la fenêtre. Ce fonctionnement est très pratique si vous utilisez une texture d’arrière-plan. De très nombreuses textures sont librement téléchargeables sur le Web. Ici, par exemple, nous allons utiliser une des textures proposées sur le site http://www.vracimages.com. A titre d’exemple, nous allons utiliser une texture Bois. Un clic droit sur l’une des textures proposées et nous sauvegardons la texture sur le disque dur de l’ordinateur, sous le nom bois.jpg. Il suffit maintenant de remplacer chien.gif par bois.jpg dans l’attribut background de la balise <body>. La page est rafraîchie et la nouvelle texture occupe tout l’arrière-plan.


Il existe plusieurs propriétés CSS relatives à l’arrière-plan :

  • background-color définit la couleur de l’arrière-plan ;
  • background-image utilise une image en arrière-plan ;
  • background-repeat indique si l’image est répétée horizontalement et/ou verticalement ;
  • background-attachment indique si l’arrière-plan est fixe ;
  • background-position définit les coordonnées de l’image d’arrière-plan.

Dans cet exemple, le code HTML définit une balise <div> de classe box. Le code CSS détermine les dimensions de la balise, la couleur d’arrière-plan, l’image d’arrière-plan, le mode de répétition de l’image (ici la répétition est verticale mais pas horizontale), le type d’attachement de l’image d’arrière-plan (ici, il s’agit d’un arrière-plan fixe) et la position de l’image d’arrière-plan (à gauche et centrée).

Voici le résultat dans Internet Explorer :

Toutes les propriétés de préfixe background peuvent être rassemblées dans une seule :

.box {
background : #abcdef url(‘neige.jpg’) repeat-y fixed left center;
}

Bien entendu, le résultat est le même …


Interdire le changement du papier peint

En utilisant une stratégie de groupe locale, il est possible d’imposer un papier peint à tous les comptes d’utilisateur et d’interdire sa modification. Cliquez sur Démarrer, tapez gpedit.msc dans la zone de texte Rechercher et cliquez sur gpedit.msc, dans la partie supérieure du menu Démarrer.

Read more


Vous trouvez l’arrière-plan un peu trop uniforme et vous aimeriez le remplacer par une image ? Cette opération est très simple dans WordPress. Cliquez sur Apparence puis sur Arrière-plan. Cliquez sur Parcourir, désignez une image sur votre disque dur et cliquez sur Envoyer.

Indiquez la position de l’image, indiquez si le motif doit se répéter pour couvrir toute la surface de la page et si l’arrière-plan doit être fixe ou défiler avec la page. Cliquez enfin sur Enregistrer les modifications.

La modification est immédiatement reportée dans votre site :