Depuis que l'auteur a publié une collection de grandes conceptions Web d'arrière-plan, j'ai reçu beaucoup d'e-mails pour demander comment utiliser CSS pour implémenter une grande conception Web d'arrière-plan. Par conséquent, j'ai décidé de partager avec vous les compétences de conception du site Web en arrière-plan. Dans ce tutoriel, j'utiliserai quelques exemples pour illustrer comment utiliser une ou deux images pour implémenter la conception d'un grand site Web d'arrière-plan.
Erreurs fréquemment faites: le fond est coupé
En regardant l'exemple de fichier, il n'y a pas de problème lorsqu'il s'agit d'une résolution inférieure à 1280. Mais si votre moniteur a une résolution supérieure à 1280 pixels, vous verrez la partie en dehors de l'image d'arrière-plan.
Une solution simple au problème: définissez la couleur du bord de l'image sur la même couleur que l'arrière-plan de la page Web. Ici, j'utilise le mur du concepteur Web comme exemple, regardez l'image ci-dessous et note que les bords de l'image sont des couleurs unis.
Partie CSS
Cette pièce est simple, définissez l'image d'arrière-plan de l'élément corporel (situé au centre, en haut)
Voici le code CSS:
| corps { rembourrage: 0; marge: 0; CONTEXTE: # F8F7E5 URL (WDW-BG.JPG) Top central sans répétition; Largeur: 100%; Affichage: table; } |
Faites attention au fait qu'il existe deux lignes supplémentaires dans le sélecteur de corps, afin que l'image d'arrière-plan change lorsque la fenêtre du navigateur est plus petite que la largeur du contenu, qui apparaîtra dans Firefox.
