Notice: wp_add_privacy_policy_content est appelée de la mauvaise manière. The suggested privacy policy content should be added only in wp-admin by using the admin_init (or later) action. Veuillez lire Débogage dans WordPress (en) pour plus d’informations. (Ce message a été ajouté à la version 4.9.7.) in /home/xavierbs/www/_blog/wp-includes/functions.php on line 4161
Fondu d'image pour un background répété en y - Murviel Info

Fondu d’image pour un background répété en y

Notez que cet article a été écrit pour la première fois il y a plus de 4 ans, mais n'est pas nécessairement obsolète.

Pour une image en background répété en y, pour éviter un décrochage trop disgracieux entre le bas et le haut de l’image, on peut utiliser le fondu sur photoShop en faisant un dégradé du haut de l’image. Pour cela, ouvrez l’image que vous voulez utiliser en background. On ne fera qu’un dégradé en y, en supposant que l’image n’est pas répétée en x, et qu’elle prend toute la largeur de la page.

Ouvrez l’image dans photoShop, et ajuster la largeur,

Ouvrir votre image dans photoShop.
Ouvrir votre image dans photoShop.

Transformez votre image en calque en cliquant droit sur l’onglet de l’arrière-plan et en sélectionnant « Calque d’après l’arrière-plan »,

Transformer votre image en calque.
Transformer votre image en calque.

Sélectionner la partie haute de votre image, plus ou moins grande,

Selectionnez un rectangle en haut de l'image.
Selectionnez un rectangle en haut de l’image.

Faîtes « Calque », « Nouveau », « Calque par Copier ». Vous obtenez un nouveau calque de cette partie (Calque 1). Avec ce calque sélectionné, faîtes « Edition », « Transformation », « Symétrie Axe vertical » (afin que le haut et le bas collent parfaitement),

Appliquer Transformation et Symétrie Axe Vertical
Appliquer Transformation et Symétrie Axe Vertical

Déplacez ce calque en bas de votre image,

Déplacer votre calque vers le bas.
Déplacer votre calque vers le bas.

Faîtes « Calque », « Masque de fusion », « Tout faire apparaître ». L’icône apparaît dans la liste des calques pour le calque 1.

Appliquer un masque de fusion au Calque 1.
Appliquer un masque de fusion au Calque 1.

Sélectionnez l’outil « Dégradé » (il est avec le pot de peinture), et sélectionnez le haut du calque 1 et tirez légèrement vers le bas (jusqu’au milieu du calque).

Appliquer l'outil "Dégradé" du haut du calque vers le milieu.
Appliquer l’outil « Dégradé » du haut du calque vers le milieu.
Le dégradé.
Le dégradé.

Le résultat dans un navigateur. Si vous voulez que votre fond prenne toute la largeur de la page, passez la propriété CSS background-size à 100%.

Fond dans le navigateur.
Fond dans le navigateur.

Et voilà, vous pouvez bien-sûr faire la même chose en x.

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *