Les feuilles de style en cascade (CSS) niveau 3, également connues sous le nom de CSS3, introduit la prise en charge de plusieurs images d'arrière-plan. Vous pouvez répertorier plusieurs images d'arrière-plan, en les séparant par une virgule, et définir leur mode d'affichage à l'aide de propriétés d'arrière-plan telles que «background-position» et «background-repeat». Tant que chaque valeur définie correspond à l'ordre des URL des images, ces propriétés produiront les effets escomptés. Vous pouvez également utiliser "background-attachment" pour créer un arrière-plan fixé sur l'écran lorsque les utilisateurs font défiler vers le haut ou vers le bas.
1
Ouvrez votre page Web dans le Bloc-notes ou dans un éditeur de code pour voir son code. Recherchez l'élément HTML auquel vous souhaitez appliquer les multiples arrière-plans fixes et trouvez son nom d'identification:
Contenu...2
Faites défiler jusqu'en haut du code et localisez la balise "" qui fait référence à votre feuille de style :
Recherchez le nom de la feuille de style que vous souhaitez éditer dans l'attribut "href" de la balise "". Si votre code comprend plusieurs balises "", recherchez celle qui pointe vers votre feuille de style générale plutôt que des fichiers portant des noms tels que "print" ou "IE".
3
Ouvrez la feuille de style dans le Bloc-notes ou dans votre éditeur de code. Recherchez le nom d'identification de votre élément HTML dans le code. Ajoutez ce sélecteur au bas de votre code si vous ne le trouvez pas:
}
4
Définissez la propriété "background-image" entre les accolades après votre sélecteur:
image d'arrière-plan : URL(chemin/vers/premier-bg.png), URL(chemin/vers/second-bg.png);
}
Séparez chaque URL par une virgule pour répertorier plusieurs images d'arrière-plan. Définissez le chemin entre chaque parenthèse sur l'URL d'une image d'arrière-plan que vous souhaitez utiliser.
5
Commencez une ligne vide sous "background-image" et ajoutez la propriété "background-position":
position d'arrière-plan : en haut à gauche, 100px 200px ;
Définissez la position de chaque arrière-plan dans le même ordre qu'ils apparaissent dans la liste d'URL "background-image". Dans l'exemple ci-dessus, le "first-bg.png" est défini pour s'afficher dans le coin supérieur gauche de l'élément HTML. Le "second-bg.png" affichera alors 100 pixels du haut vers le bas et 200 pixels du bord gauche de l'élément HTML. Vous pouvez également utiliser des valeurs en pourcentage telles que "80 % 20 %".
6
Définissez "background-attachment" sous la propriété "background-position":
background-attachment: fixe, défilement;
Utilisez « fixe » lorsque vous souhaitez qu'une image d'arrière-plan persiste à l'écran même lorsque l'utilisateur fait défiler la page Web vers le haut ou vers le bas. Le paramètre par défaut est "défilement".
7
Ajoutez une nouvelle ligne sous "background-attachment" et ajoutez la propriété "background-repeat". Définissez cette propriété sur « no-repeat » pour chaque image d'arrière-plan que vous ne souhaitez pas mosaïquer :
background-repeat: pas de répétition, répétition-x;
Utilisez "repeat-x" ou "repeat-y" pour répéter une image sur l'axe "Y" (vertical) ou "X" (horizontal) d'un élément HTML.
