Notez que cet article a été écrit il y a plus de 7 ans, mais il n'est pas forcément 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,
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 »,
Sélectionner la partie haute de votre image, plus ou moins grande,
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),
Déplacez ce calque en bas de votre image,
Faîtes « Calque », « Masque de fusion », « Tout faire apparaître ». L’icône apparaît dans la liste des calques pour le 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).
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%.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <title>Background image répétée en y</title> <style> body { background-image: url("fond.jpg"); background-repeat: repeat-y; background-position: center top; height: 1000px; } </style> </head> <body> </body> </html> |
Et voilà, vous pouvez bien-sûr faire la même chose en x.
