Les arrière-plans ajoutent de la personnalité et du style à votre site Web lorsqu’ils sont utilisés correctement, mais ils peuvent être très distrayants lorsqu’ils sont utilisés de manière incorrecte. Deux principes de conception de base doivent être suivis pour un arrière-plan; l’arrière-plan doit se charger rapidement et compléter, et non porter, la conception de votre site.
Table des matières
Principes de base
Les arrière-plans proviennent de plusieurs sources, mais ils ont tendance à être des couleurs, des photographies, des graphiques ou des illustrations. Bien que moins courants, les arrière-plans peuvent également être animés.
Bien qu’il soit devenu une pratique acceptable d’utiliser une grande image comme arrière-plan, il est important de se rappeler que lorsque vous créez une image d’arrière-plan, vous devez la compresser pour la rendre aussi claire que possible. Ceci est souvent accompli en utilisant simplement une option de type «exportation pour le Web» dans le logiciel d’édition d’images.
Arrière-plans de couleur
Si vous avez seulement besoin de changer la couleur de l’arrière-plan, plutôt que d’y placer une image, vous pouvez contrôler l’image via votre feuille de style CSS.
Changer la couleur d’arrière-plan dans CSS
Placez ce code dans votre feuille de style pour changer la couleur d’arrière-plan de votre page. N’oubliez pas d’utiliser une couleur d’arrière-plan et une couleur de texte avec suffisamment de contraste pour que le texte soit toujours facile à lire.
corps {
couleur de fond: jaune;
}
Ou, vous pouvez utiliser le code hexadécimal si vous préférez.
corps {
couleur de fond: # FFFF00;
}
Si vous devez remplacer la feuille de style pour une page particulière, utilisez un codage de style en ligne.
Modification de la couleur d’arrière-plan en HTML
Avec l’introduction de HTML5, la possibilité de changer la couleur de l’intérieur de la balise HTML en utilisant l’attribut bgcolor n’est plus une option. Le changement reflète le mouvement d’utiliser CSS pour contrôler tous les styles HTML.
Avant la mise en œuvre de HTML5, vous pouvez changer la couleur de la page de cette façon:
Bien que cette méthode fonctionne toujours pour les navigateurs plus anciens, le code ne sera finalement pas rendu à mesure que les utilisateurs continueront de passer à des navigateurs plus récents.
Couleurs Web Safe
Dans les premières années d’Internet, les concepteurs ont adhéré à la pratique consistant à n’utiliser que des couleurs sécurisées pour le Web, car ces couleurs rendaient les mêmes sur tous les moniteurs. De nombreux moniteurs actuels peuvent rendre des millions de couleurs, mais ils ne rendent pas tous la palette de 216 couleurs de couleurs non sécurisées pour le Web de la même manière. Donc, si cela vous préoccupe, il est toujours plus sûr d’utiliser la palette Web sécurisée si vous avez besoin que vos couleurs soient aussi proches que possible de ce que vous avez conçu et rendues de manière égale sur les navigateurs et les appareils.
Arrière-plans d’images
Pour inclure une image d’arrière-plan, vous devrez contrôler une ou plusieurs des diverses descriptions associées à la propriété d’arrière-plan. Ceux-ci inclus:
- Couleur de l’arrière plan – Contrôle la couleur d’arrière-plan à utiliser
- Position d’arrière-plan – Contrôle où l’image est positionnée
- Taille de l’arrière-plan – Contrôle la taille de l’image de fond (introduite dans CSS3)
- Répétition du fond – Spécifie comment répéter l’image verticalement, horizontalement ou dans les deux sens
- Origine du fond – Contrôle la zone de positionnement de l’image (introduit dans CSS3)
- Clip d’arrière-plan – Spécifie la zone de peinture de l’image d’arrière-plan (introduit dans CSS3)
- Pièce jointe en arrière-plan – Contrôle si l’image défile ou est fixe
- Image de fond – Spécifie la ou les images à utiliser
De manière générale, vous utiliserez le plus souvent les descriptions d’image, de répétition et de position. Cependant, la meilleure pratique consiste à déclarer également une couleur avec la description de la couleur d’arrière-plan au cas où l’image d’arrière-plan ne se chargerait pas.
Utilisation de petites images pour créer un motif
La mosaïque d’une image est une méthode courante de création d’un arrière-plan de site Web. Cette méthode crée un arrière-plan en répétant une image horizontalement, verticalement ou à la fois horizontalement et verticalement. Les raisons courantes d’utiliser cette approche sont de créer un aspect texturé, de créer des lignes et des ombres ou d’ajouter de la profondeur à une page.
Lors de l’utilisation de CSS, ces attributs de répétition d’arrière-plan vont mosaïquer votre image:
- Répéter-x pour répéter l’image horizontalement
- Répéter-y pour répéter l’image verticalement
- Répéter pour répéter l’image à la fois horizontalement et verticalement
- Pas de répétition pour éviter de répéter l’image
Le codage de votre feuille de style ressemblerait à ceci:
div.bgClass {
image de fond: url (« images / mon_background.png »); // c’est l’image que vous voulez répéter
background-position: en haut à gauche; // ceci place la première instance de l’image dans le coin supérieur gauche
background-repeat: repeat-x; // cela provoque la répétition de l’image de gauche à droite
}
Vous pouvez également déclarer tous les attributs d’arrière-plan dans une seule instruction:
div.bgClass {
background: url (‘images / my_background.png’) repeat-x en haut à gauche;
}
Utilisation de grandes images comme arrière-plans
Lorsque de grandes images étaient placées pour la première fois sur des pages Web, il était courant de découper l’image en petits morceaux pour que l’image apparaisse plus rapidement sur la page. Cependant, cette pratique n’est plus considérée comme la meilleure approche car chaque épissure d’image représente un appel au serveur. Dans l’ensemble, ces multiples appels ralentissent votre site. Si vous utilisez une grande image, compressez-la simplement à la plus petite taille possible tout en conservant la clarté de l’image.
Une tendance populaire consiste à utiliser une grande photographie, souvent centrée, comme image de fond. Cela crée un look puissant et intrigant pour un site, à condition que l’image ne dépasse pas la page. Les images, floues ou nettes, deviennent la toile de fond du contenu et attirent l’utilisateur lorsqu’elles sont correctement conçues. Les sites qui réussissent avec ce look ont tendance à utiliser des images qui ont une «ouverture» naturelle pour le texte.
Pour placer une seule image comme arrière-plan, placez-la dans votre feuille de style:
div.bgClass {
image de fond: url (« images / mon_background.png »);
couleur d’arrière-plan: # FF0000; // vous devez toujours inclure une couleur au cas où l’image ne serait pas disponible
}
CSS3 autorise plusieurs images pour l’arrière-plan:
div.bgClass {
image de fond: url (« images / mon_background.png »), url (« images / mon_seconde_background.png »); // séparez simplement les arrière-plans par une virgule
couleur de fond: blanc;
}
Contexte à faire et à ne pas faire
Voici quelques conseils pour créer de superbes arrière-plans.
Faire
- Gardez les images claires; cela signifie généralement 10 Ko ou moins pour les arrière-plans, 60 Ko pour les en-têtes et 100 Ko pour les images de haute qualité.
- Utilisez des images / graphiques d’arrière-plan qui complètent le design.
- Assurez-vous que votre image / design s’adaptera à des écrans plus grands.
À ne pas faire
- Ne créez pas de désordre en utilisant un arrière-plan «occupé».
- Ne vous fiez pas à l’arrière-plan pour réaliser la conception du site.
- Ne réduisez pas le contraste des couleurs au point que le texte soit difficile à lire.
Le temps de chargement compte
Les appareils mobiles ont encore plus modifié le terrain de jeu en ce qui concerne les images d’arrière-plan. Les utilisateurs habitués aux connexions Internet haut débit sont quelque peu impatients lorsqu’ils téléchargent du contenu sur des réseaux 3G ou 4G beaucoup plus lents. L’Internet haut débit peut atteindre des vitesses de 15 Mbps ou plus, contre environ 10 Mbps pour la 4G et moins de 4 Mbps pour la 3G. Ainsi, lorsque vous concevez un site, créez une version mobile uniquement ou assurez-vous que vos images, l’arrière-plan et d’autres fonctionnalités sont suffisamment légers pour être téléchargés rapidement.
Lisez plus d’astuces sur le design web ici, et n’oubliez pas de partager l’article sur Facebook !
