Médiaforma

All posts tagged arrière-plan

Cliquez sur l’image dont vous voulez supprimer l’arrière-plan, puis sélectionnez l’onglet Format dans le ruban. Cliquez sur Supprimer l’arrière-plan dans le groupe Ajuster. Ce que PowerPoint considère comme étant l’arrière-plan apparait immédiatement en mauve dans l’image.

Un nouvel onglet nommé Suppression de l’arrière-plan est affiché et sélectionné dans le ruban.

Si nécessaire, cliquez sur l’icône Marquer les zones à conserver pour conserver une zone qui avait été considérée comme une partie de l’arrière-plan par PowerPoint. Tracez un segment de droite dans la zone à conserver. Les pixels avoisinants de couleur proche sont automatiquement ajoutés. Les éléments ajoutés sont repérés par un signe plus.

Inversement, cliquez sur l’icône Marquer les zones à supprimer pour définir les zones qui doivent être supprimées, et désignez-les en traçant des segments de droites avec la souris.

Cliquez sur Conserver les modifications ou sur Ignorer toutes les modifications dans le groupe Fermer pour retourner à la présentation en conservant ou en annulant la suppression de l‘arrière-plan.


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.


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

Vous utiliserez la propriété CSS z-index pour définir la position relative de plusieurs éléments empilés. Plus la valeur affectée à la propriété z-index d’un élément est élevée, plus cet élément se trouve en avant-plan.

Pour illustrer cette propriété, nous allons empiler plusieurs rectangles colorés dans une balise <div> et choisir leur ordre de superposition.

Le code HTML est élémentaire. Il contient une balise <div> conteneur ligne 36 et trois balises <div> enfants lignes 37 à 39.

Examinons le code CSS.

Pour limiter l’écriture, les propriétés communes aux trois classes sont rassemblées entre les lignes 5 et 10. Ainsi, les éléments de classe rectangle1, rectangle2 et rectangle3 seront tous trois positionnés en absolu et auront une dimension de 200×150 pixels.

Les caractéristiques propres à chaque classe sont définies :

  • entre les lignes 11 et 17 pour le premier rectangle ;
  • entre les lignes 18 et 24 pour le deuxième rectangle ;
  • entre les lignes 25 et 31 pour le troisième rectangle.

La propriété z-index de la balise <div> de classe rectangle1 a pour valeur 1. Celle de la balise <div> de classe rectangle2 a pour valeur 2 et celle de la balise <div> de classe rectangle3 a pour valeur 3. La balise de classe rectangle3 se trouve donc devant la balise de classe rectangle2, el la balise de classe rectangle2 se trouve devant la balise de classe rectangle1.


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 :