Télécharger l'articleTélécharger l'articleX
How.com.vn est un wiki, ce qui veut dire que de nombreux articles sont rédigés par plusieurs auteurs(es). Pour créer cet article, des auteur.e.s volontaires ont participé à l'édition et à l'amélioration.
Cet article a été consulté 17 705 fois.
L'arrière-plan est l'un des éléments les plus fondamentaux d'une page web. Un bon arrière-plan pose le ton du site web et donne déjà une indication sur son contenu. Il y a beaucoup de méthodes différentes pour ajouter un arrière-plan, chacune ayant un but différent. Certaines méthodes vous permettent d'appliquer l'arrière-plan à toutes les pages du site web, alors que d'autres se contentent de l'appliquer à certaines pages. Cet article vous apprend à ajouter un arrière-plan à votre site web en utilisant le langage HTML ou les CSS (feuilles de style en cascade).
Étapes
Créer un arrière-plan unicolore
L'arrière-plan unicolore est le type d'arrière-plan le plus basique que vous pouvez appliquer sur une page web. De fait, n'importe quel site démarre par défaut avec un arrière-plan blanc. Pourtant, si on peut dire que l'arrière-plan blanc apporte une certaine idée de candeur et de propreté lorsqu'il est accompagné d'un jeu de couleur harmonieux, un arrière-plan de couleur différente peut mieux convenir à d'autres thèmes.
Ouvrez votre code source.
Dans la balise body, ajoutez un attribut appelé bgcolor. Votre balise body ressemble à présent à ça :<body bgcolor="COLORNAME">où COLORNAME est le nom de la couleur. COLORNAME peut être rempli avec plusieurs sortes de couleurs :<body bgcolor="red">(nom de la couleur)<body bgcolor="#FF0000">(valeur hexadécimale)<body bgcolor="rgb(255, 8, 9)">(valeurs en RGB)
Vous pouvez utiliser les options RGB et # pour expérimenter une multitude de nuances. Vous pouvez aussi utiliser la première méthode qui est plus facile. Souvenez-vous que si vous tapez une couleur peu commune comme Bleu vert ultramarin, vous obtiendrez seulement du blanc.Publicité
Ajouter une image en arrière-plan
- Il est légèrement plus compliqué d'ajouter une image en arrière-plan que d'utiliser un arrière-plan unicolore.
Ajoutez les propriétés de l'arrière-plan dans la balise body, pour qu'elle ressemble à ceci:<body background="SRC">où SRC est la source de l'image qui peut être dans le même dossier ou dans un autre dossier ou page web.<body background="red.gif">(dans le même dossier)<body background="\Folder1\red.gif">(dans un autre dossier)<body background="imagepage1/red.gif">(sur une autre page web)
Pensez à préciser l'extension .gif/ .jpeg /.bmp de l'image.Publicité
Créer un arrière-plan unicolore
Pour ajouter un arrière-plan unicolore avec les CSS, ajoutez un attribut de style. Vous pouvez aussi utiliser des id et des classes avec des feuilles de style internes et externes.
Votre balise body devrait ressembler à ceci :<body style="background-color: COLORNAME;">
où COLORNAME est le nom de la couleur en valeur hexadécimale ou en RGB (voir les dernières étapes de la méthode de l'arrière-plan unicolore en HTML qui est aussi applicable ici).
Publicité
Ajouter une image
Pour ajouter une image, ajoutez l'attribut style dans la balise body. Vous pouvez aussi donner des id et des classes et utiliser des feuilles de style internes et externes.
Votre balise body devrait maintenant ressembler à ça :<body style="background-image:url('SRC'); ">
Rappelez-vous que SRC est le code source. L'image peut venir du même dossier, d'un autre dossier, ou d'une autre page web.<body style="background-image:red.gif;">(dans le même dossier)<body style="background-image:\Folder1\red.gif">(dans un autre dossier)<body style="background-image:imagepage1/red.gif">(sur une autre page web).
Pensez à préciser l'extension de l'image.Publicité
Créer un arrière-plan à motifs répétés
Pour faire un arrière-plan à motifs répétés, ajoutez un arrière-plan comme expliqué dans les étapes ci-dessus. Votre balise body doit maintenant être :<body style="background-image: url('SRC'); background-repeat:REPEAT-SETTINGS; ">où REPEAT-SETTINGS sont les paramètres de répétition. Il peut y avoir plusieurs boucles de répétition, par exemple selon les modèles suivants :<body style="background-image: red.gif; background-repeat: repeat;">(L'arrière-plan se répète horizontalement et verticalement).<body style="background-image: red.gif; background-repeat: repeat-x;">(L'arrière-plan se répète horizontalement).<body style="background-image: red.gif; background-repeat: repeat-y;">(L'arrière-plan se répète verticalement).
Créer un arrière-plan fixe
Un arrière-plan fixe est apaisant car il ne bouge pas lorsque vous déroulez la page. Pour en appliquer un, vous avez juste besoin de faire quelques modifications dans le code de l'étape précédente. Faites les modifications pour que la balise body ressemble à ceci :<body style="background-image:url('SRC'); background-attachment:fixed; background-position:POSITION; background-repeat:REPEAT SETTINGS;">
où SRC est la source de l'image d'arrière-plan, POSITION est la position de l'image (elle peut être au centre comme dans le coin en haut à droite); est background-attachment est le principal paramètre de ce type d'arrière-plan. Il est utilisé pour indiquer la position de l'arrière-plan et demander à ce qu'il soit fixe.
Publicité
Conseils
- Lisez l'article en entier : une section laissée de côté peut contenir des conseils importants (les paragraphes sont reliés entre eux et rédigés en supposant que le texte soit lu dans son ensemble).
Publicité
Avertissements
- Les méthodes HTML sont discutées et peuvent ne pas marcher avec HTML 4.01 Strict ou avec XHTML strict.
Publicité
Références
- www.w3schools.com est un bon site si vous voulez apprendre plus en profondeur à quoi servent les attributs et les déclarations.
Cet article vous a-t-il été utile ?
⚠️ Disclaimer:
Content from Wiki How Français language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
Publicité
