Table des matières:
- Définir une image de fond à utiliser comme en-tête
- Positionnement, répétition ou défilement de votre image d'arrière-plan
Vidéo: WordPress : comment faire un lien vers une ancre dans une page créée avec Brizy 2024
La plupart des thèmes ont une image d'en-tête qui apparaît en haut de la page. Dans WordPress, cette image est générée par un graphique défini soit dans la valeur CSS de la propriété représentant la zone d'en-tête, soit via l'utilisation d'une fonctionnalité d'en-tête personnalisée dans WordPress.
Définir une image de fond à utiliser comme en-tête
Dans le thème Twenty Fifteen par défaut de WordPress, y compris une image d'en-tête personnalisée sur un site utilisant le thème Twenty Fifteen est très facile. Tout le travail a été fait pour vous.
Dans les thèmes qui ne possèdent pas la fonction d'image d'en-tête personnalisée, vous pouvez facilement définir une image d'arrière-plan pour l'image d'en-tête à l'aide de CSS. Pour les besoins de cet exemple, le code HTML de l'en-tête du modèle est
Dans le fichier CSS (style.css), vous pouvez utiliser une image d'arrière-plan en la définissant dans les propriétés CSS de #header. Utilisez ce code:
#header {background: url (/ images / header-image.jpg) non-repeat; largeur: 980px; height: 100px;}
La valeur d'arrière-plan indique une image d'en-tête. image jpg. Pour que cette image apparaisse sur votre site, vous devez créer l'image et la télécharger sur votre serveur Web dans le répertoire / images /.
Lorsque vous travaillez avec des graphiques sur le Web, vous devez utiliser des formats d'image GIF, JPG ou PNG. Pour les images avec un petit nombre de couleurs (telles que les graphiques, les dessins au trait, les logos, etc.), le format GIF fonctionne le mieux. Pour les autres types d'images (captures d'écran avec texte et images, transparence mixte, etc.), utilisez JPG ou PNG.
Positionnement, répétition ou défilement de votre image d'arrière-plan
Après avoir importé un graphique à utiliser dans votre thème, vous pouvez utiliser les propriétés d'arrière-plan CSS pour le positionner. Les propriétés CSS principales - background-background, background-repeat et background-attachment - vous aident à obtenir l'effet désiré. Consultez les propriétés d'arrière-plan CSS et leurs valeurs disponibles pour les modifier dans votre feuille de style de thème.
| Propriété | Description | Valeurs | Exemple |
|---|---|---|---|
| background-position | Détermine le point de départ de votre image d'arrière-plan sur votre
page Web |
centre
bas droit centre gauche centre droit centre centre |
position de fond: centre inférieur; |
| background-repeat | Détermine si votre image de fond se répète ou
tile |
répète (répète infiniment)
repeat-y (répète verticalement) repeat-x (répète horizontalement) < no-repeat (ne se répète pas) background-repeat: repeat-y; |
background-attachment |
| Détermine si votre image d'arrière-plan est fixe ou fait défiler | avec la fenêtre du navigateur
Fixe |
défilez
background-attachment: faites défiler; |
Vous pouvez explorer le positionnement du graphique d'en-tête avec certaines des valeurs fournies ci-dessus.Si vous êtes une personne visuelle, vous aimerez tester et ajuster les valeurs pour voir les effets sur votre site. |
Dites que votre objectif est
mosaïque, ou répétez, l'image d'arrière-plan horizontalement, ou sur l'écran du navigateur de gauche à droite pour qu'il s'adapte à la largeur du navigateur n'importe quel ordinateur. Vous souhaitez également changer la couleur d'arrière-plan à une couleur différente (comme le blanc, comme dans l'exemple suivant). Pour ce faire, ouvrez à nouveau la feuille de style et modifiez: background: # f1f1f1;
à
arrière-plan: #FFFFFF; background-image: url (images / header-image.jpg); background-repeat: répète-x;
ou vous pouvez utiliser l'arrière-plan
: #FFFFFF url (images / header-image.jpg) repeat-x;
