Définir une couleur d’arrière-plan et/ou une image pour une page ou son élément individuel est assez simple. L’essentiel est de savoir où et comment faire cela, ainsi que d’avoir un code couleur et/ou une image de fond. Il est possible que vous appreniez beaucoup de nouvelles choses grâce à cet article, mais je l'ai créé spécifiquement pour les débutants. Par conséquent, tout sera aussi court et détaillé que possible à la fois. L'essentiel est que vous recevrez non seulement une idée générale et des exemples prêts à l'emploi, mais également une compréhension de la façon de créer un arrière-plan en HTML.

Pour définir l'arrière-plan en HTML, utilisez le DOCTYPE intermédiaire

Et je commencerai par le fait que dans HTML5 il n'est pas possible de définir . Il a été décidé d'ajouter cette fonctionnalité au CSS. Par conséquent, si vous envisagez d'utiliser ce qui suit et souhaitez obtenir un code valide (correct), vous devez choisir le type de document de transition. Pour ce faire, votre page web doit commencer par la ligne suivante :

De transition//FR" "http://www.w3.org/TR/html4/loose.dtd">

Ceci étant réglé, passons à la compréhension de la façon dont l'arrière-plan est créé. Et la première chose à noter ici est la différence entre Couleur de l'arrière plan Et image de fond. Au début ça va Couleur de l'arrière plan, qui remplit tout l'espace disponible de la page ou de son élément. Superposé dessus se trouve une répétition image de fond. Visuellement, cela peut être représenté comme suit :

Contexte d'un document HTML et de ses éléments

La deuxième chose que vous devez savoir est la différence entre corps du document Et élément de document. Corps du document est indiqué dans le code HTML d'une page web par la balise BODY, qui reprend l'intégralité du contenu de la page web. Évidemment, l’arrière-plan du corps du document ne peut pas être transparent. Si l'arrière-plan du corps du document n'est pas spécifié, la valeur par défaut spécifiée dans les paramètres du navigateur est utilisée.

Éléments de page sont à l’intérieur de la balise BODY. Il est à noter qu'il n'est pas possible de définir la couleur et/ou l'image d'arrière-plan en utilisant HTML pour tous les éléments du document. Par exemple, une image d'arrière-plan ne peut être spécifiée que pour les tableaux. Par défaut, ils ont généralement un fond transparent.

L'attribut bgcolor pour créer une couleur d'arrière-plan

Demander Couleur de l'arrière plan le document ou ses éléments utilisent l'attribut bgcolor, par exemple :

Dans ce cas, nous définissons la couleur d’arrière-plan de la page dans son ensemble. Et voici un exemple de la façon de définir la couleur d'arrière-plan d'un tableau dans la balise TABLE :

Texte avec arrière-plan

Il est à noter que la couleur d'arrière-plan du tableau peut être spécifiée pour les deux lignes de la balise TR et pour leurs cellules dans la balise TD.

Comment connaître le code couleur ?

Vous avez probablement déjà remarqué que la couleur en HTML est définie sur une valeur spéciale. code, par exemple : #ec008c . Afin de connaître le code de la couleur dont vous avez besoin, vous pouvez utiliser l'un des éditeurs graphiques. Par exemple, dans Photoshop, vous pouvez utiliser " Outil Pipette» (Pipette) pour obtenir la couleur à partir d'un point de l'image. Ensuite, vous devez cliquer sur la couleur obtenue dans la barre d'outils et dans la fenêtre qui s'ouvre " Pipette à couleurs» (Sélection de couleur) copiez le code couleur.

Veuillez noter que ce code n'aura pas de signe dièse (#) au début ; ce signe devra être ajouté manuellement.

Vous pouvez également utiliser de nombreux services en ligne, par exemple :

• etc.

Leur principe de fonctionnement est encore plus simple : cliquez sur la couleur souhaitée et obtenez son code.

L'attribut background pour créer une image d'arrière-plan

Comme dans le cas de la couleur de fond, et dans le cas de image de fond Vous devez utiliser un attribut spécial, à savoir background , par exemple :

Dans ce cas, nous définissons une image d’arrière-plan pour la page dans son ensemble. Il est à noter qu'en raison de la limitation de la taille de l'image, celle-ci sera répétée, par exemple :

Comme vous pouvez le constater, lors de la répétition, la transition entre les images est perceptible. Par conséquent, des images spéciales sont souvent utilisées, où ce point est pris en compte.

Et voici un exemple de la façon de définir une image d'arrière-plan pour un tableau dans la balise TABLE :

Texte avec arrière-plan

Il est à noter que l'image d'arrière-plan ne peut être définie que pour le tableau dans son ensemble et/ou pour ses cellules individuelles. Cela ne fonctionnera pas pour une chaîne.

Chemin absolu et relatif vers l'image d'arrière-plan

Cela mérite une attention particulière adresse de l'image d'arrière-plan. Dans ce cas, un chemin relatif vers l'image est utilisé, c'est-à-dire L'adresse est spécifiée par rapport à l'emplacement du fichier image pour le fichier de page Web. Cette option ne peut pas être qualifiée de particulièrement réussie. Il est préférable d'utiliser un chemin absolu vers l'image, c'est-à-dire son URL complète, Par exemple:

Dans ce cas, vous n’aurez aucun problème associé. Vous pouvez en savoir plus à ce sujet.

Résumons-le

L'utilisation des attributs bgcolor et background est obsolète, donc pour la validité du code HTML vous devrez utiliser le DOCTYPE transitionnel. Pour définir la couleur d'arrière-plan en HTML, il utilise des codes spéciaux, que vous pouvez trouver dans un éditeur graphique ou en utilisant des services en ligne spéciaux. L'image d'arrière-plan est dupliquée dans la zone qui lui est allouée et se trouve au-dessus de la couleur d'arrière-plan. Pour spécifier une image de fond, il est préférable d'utiliser son URL complète. C'est tout ce que j'ai. Merci pour votre attention. Bonne chance!

à 22h37

Modifier le message

Pour créer un site internet, une question importante est de savoir comment réaliser un arrière-plan en html. Cette procédure implique l’utilisation de certaines balises – mots de code et lettres. Grâce à eux, vous pouvez mettre un arrière-plan différent, le rendre monochromatique - le remplir ou mettre n'importe quelle image à la place de l'arrière-plan. De telles actions seront très utiles à tous les maquettistes et à ceux qui décident d'« habiller » leur site Web par eux-mêmes.

Faire le fond

Avant de créer l’arrière-plan du site Web en HTML, vous devez ouvrir le code HTML de la page dans un éditeur de texte. Vous devez vous rappeler que les balises sur la page sont placées verticalement. Puis, entre les balises … , tu dois mettre une balise- ces balises sont nécessaires pour clarifier le style des éléments d'une page Web donnée. À la place des trois points, vous devez écrire - body (background:) . Il s'agit d'une option qui vous permet de définir différents styles pour l'arrière-plan de la page. Vous pouvez effectuer l’opération de réglage des couleurs de deux manières. D'abord:

Corps (arrière-plan : #000000) – l’arrière-plan de la page doit maintenant être noir.

Cette méthode convient également pour définir à la fois une couleur et une image comme arrière-plan. C'est après les deux points que vous pouvez mettre soit un code couleur, soit un lien vers l'image. Ou vous pouvez utiliser une méthode qui consiste uniquement à définir une couleur - un remplissage spécifique pour la page. Après les deux points, vous devez écrire ce qu'on appelle le paramètre – la couleur. Et après, mettez le code de la couleur elle-même. Cette méthode est bonne si vous l'utilisez comme modèle. Notez-le et enregistrez-le, et si nécessaire, définissez une couleur et mettez-la sur la page.

Vous pouvez mettre une image au lieu d'un arrière-plan uni. Si vous avez besoin de savoir : en HTML, comment créer une image comme arrière-plan, alors des opérations similaires doivent être effectuées. Écrivez des tags, mettez du corps (fond : lien vers l'image). Nous devons nous rappeler que l’image elle-même peut être n’importe où. Et sur un site Internet, mais il est préférable de créer un dossier à la racine du document. Dans le dossier dans lequel toutes les informations sur la page du site seront enregistrées, vous devez en créer un autre - pour les images. L'opération ressemblera à ceci :

Désormais, l'image que vous avez choisie constituera l'arrière-plan de toute la page du site. Nous espérons que vous comprenez comment créer un arrière-plan en HTML. Essayez simplement et tout s'arrangera certainement !

Presque tous les sites Web populaires ont une belle apparence. Une partie importante de la conception d’un site Web est l’arrière-plan, également appelé arrière-plan, que chacun d’entre nous peut créer ou modifier. Dans cet article, je vais vous expliquer comment mettre un arrière-plan sur un site Web.

Créer un nouvel arrière-plan pour les sites Web

Pour terminer la tâche, vous pouvez utiliser l'une des 4 méthodes suivantes :

• 1. Fond avec une seule couleur
• 2. Fond avec texture
• 3. Fond utilisant un dégradé
• 4. Arrière-plan d'une grande image

Créer un arrière-plan en utilisant une seule couleur

Pour créer ou modifier l'arrière-plan du site, composé d'une seule couleur, vous devez vous rendre dans le fichier style.css, dans lequel se trouve la valeur - body (il est responsable du corps principal du site). Vous devez maintenant enregistrer la fonction background-color si elle n'existait pas et indiquer le code couleur. Dans le cas où vous devez créer un fond blanc pour un site internet, vous devrez écrire le code suivant :

couleur d'arrière-plan : #83C5E9 ; (fond bleu, comme dans l'exemple)

Vous pouvez trouver une liste complète des couleurs sur le site Internet - (STM). Pour changer la couleur, changez simplement la valeur après les deux points et profitez de vos efforts.

Créer un arrière-plan à l'aide d'une texture

Cette méthode est particulièrement populaire ces derniers temps, car elle vous permet de créer un magnifique arrière-plan pour le site. Les textures peuvent être simples mais très belles, c'est pourquoi elles sont souvent utilisées. Afin de connecter n'importe quelle texture, vous devez la télécharger dans le dossier image sur l'hébergement sur lequel votre site est installé. Après cela, vous devez écrire le code suivant :

couleur d'arrière-plan : #537759 ;

image d'arrière-plan : url(images/motif.png);

Ce code contient un paramètre familier pour conserver la couleur (c'est le vert) et un élément responsable de la connexion de la texture verte.

Créer un arrière-plan à l'aide d'un dégradé

Toute image connectée à l'aide des fonctions CSS peut être répétée horizontalement et verticalement (le long des axes X Et Oui). Cette opportunité nous permet de créer de nos propres mains n'importe quel arrière-plan simple pour le site. Pour ce faire, vous devez créer un dégradé de 1 mégapixel de large (voir l'image ci-dessous), l'enregistrer en tant qu'image et le télécharger sur votre hébergement. Après cela, vous pouvez écrire le code nécessaire, à savoir :

couleur d'arrière-plan : #83C5E9 ;

image d'arrière-plan : url (images/gradient.jpg);

répétition d'arrière-plan : répétition-x ;

Dans cet ensemble, par ordre de priorité, il y a une fonction responsable de la couleur de fond, que nous utilisons pour la réassurance. Après cela, un paramètre responsable de la connexion du dégradé et enfin, une fonction chargée de répéter le dégradé le long de l'axe X.

Utiliser une grande image pour l'arrière-plan du site Web

Cette méthode est la deuxième plus populaire, car elle vous permet d'utiliser diverses images pour créer un arrière-plan. Pour mettre en œuvre cette méthode, il vous suffit de télécharger une grande image dans le dossier images du site et de saisir le code suivant :

couleur d'arrière-plan : #000000 ;

image d'arrière-plan : url (images/titre de l'image.jpg);

position d'arrière-plan : centre en haut ;

répétition d'arrière-plan : pas de répétition ;

Si tout est clair avec les deux premiers paramètres, alors les deux derniers doivent être abordés. La troisième fonction permet de fixer l'image au centre du site, et le dernier paramètre bloque sa répétition dans toute la structure de la page.

Changer l'arrière-plan des sites Web ucoz

Ces méthodes de création d'arrière-plan pour un site peuvent être utilisées sur différents systèmes de gestion de contenu, mais pas sur des sites - ucoz. Afin de modifier l'arrière-plan du site ucoz, vous devez vous rendre dans le panneau de configuration du site, accédez à "Gestion de la conception", puis dans "Modification des modèles".

Vous devez maintenant ouvrir la feuille de style (CSS), trouver la ligne "corps" et paramètre "arrière-plan". Après cela, vous devez copier le lien, le coller dans votre navigateur Internet et vous aurez accès à l'image qui était en arrière-plan.

Pour utiliser un nouvel arrière-plan, il vous suffit de le télécharger dans le gestionnaire de fichiers. Dans le même temps, assurez-vous que le nom de la nouvelle image d’arrière-plan est le même qu’avant la modification. Enregistrez votre travail et accédez au site Web pour visualiser le travail effectué.

Changer l'arrière-plan du site en HTML

Si vous souhaitez réaliser le fond d'un site html à l'aide d'une image, alors saisissez simplement la ligne dans le code :

Et si vous souhaitez créer l'arrière-plan du site en utilisant de la couleur, alors la ligne devrait ressembler à ceci :

Ceci conclut notre histoire. Vous savez maintenant comment créer un arrière-plan pour un site Web. Joyeux projets !

Les navigateurs modernes vous permettent d'ajouter un nombre arbitraire d'images d'arrière-plan à un élément, en répertoriant les paramètres de chaque arrière-plan séparés par des virgules. Il suffit d'utiliser la propriété universelle background et de spécifier un premier arrière-plan et un deuxième séparé par une virgule.

Comment étirer le fond sur toute la largeur de la fenêtre ?

Pour redimensionner l'arrière-plan, utilisez la propriété background-size ; définissez sa valeur sur 100 %, l'arrière-plan occupera alors toute la largeur de la fenêtre du navigateur. Pour les anciennes versions des navigateurs, vous devez utiliser des propriétés spécifiques avec des préfixes, comme indiqué dans l'exemple 1.

Comment ajouter une image de fond à une page Web ?

Pour ajouter une image d'arrière-plan à une page Web, définissez le chemin d'accès à l'image dans la valeur URL de la propriété de style d'arrière-plan, qui à son tour est ajoutée au sélecteur de corps.

Est-il possible de faire un fond animé ?

L'animation est une technique assez puissante qui peut donner vie à n'importe quel document, il n'est donc pas surprenant que la technologie Flash, qui ajoute des dessins animés aux pages Web, et qui plus est interactives, soit devenue extrêmement populaire. Le format graphique GIF prend également en charge une animation simple en changeant séquentiellement les images. Ainsi, en utilisant une image dans ce format, il est possible d'animer non seulement des images individuelles, mais également l'arrière-plan d'une page Web ou un élément spécifique.

Tout d'abord, vous devrez créer une image animée au format GIF, pour laquelle vous pourrez utiliser Adobe Photoshop ou un autre programme adapté à cet effet. Il existe également des bibliothèques de fichiers animés prêts à l'emploi qui peuvent être utilisés comme image d'arrière-plan. Ensuite, l'image est ajoutée comme arrière-plan à l'aide de la propriété de style d'arrière-plan, comme indiqué dans l'exemple 1.

Comment mettre une image de fond dans le coin inférieur droit de la page ?

Pour contrôler la position de l'image d'arrière-plan sur la page, la propriété de style background-position est utilisée ; elle définit simultanément les coordonnées horizontales et verticales de l'image. Pour annuler la répétition d'une image d'arrière-plan, utilisez la propriété background-position avec la valeur no-repeat .

Comment puis-je empêcher l’arrière-plan de se répéter ?

Par défaut, l'image d'arrière-plan est répétée horizontalement et verticalement, formant une mosaïque sur tout le champ de la page Web. Cependant, ce comportement d'arrière-plan n'est pas toujours requis, en particulier lors du placement d'une seule image. Il sera donc utile d'ajouter une valeur de non-répétition à la propriété de style d'arrière-plan.

Comment puis-je faire en sorte que l’arrière-plan se répète uniquement verticalement ?

La répétition de l'arrière-plan est généralement nécessaire pour créer des lignes décoratives ou des dégradés liés à la hauteur d'un élément ou d'une fenêtre de page Web. Dans de tels cas, répéter l’arrière-plan verticalement fournit une image cohérente, quelle que soit la taille des éléments. Ce n'est qu'au début que vous devez vous assurer que l'image d'arrière-plan est répétée sans coutures.

Bonne journée à tous ceux qui veulent apprendre et apprendre quelque chose de nouveau ! Avez-vous déjà prêté attention à l'apparence, lors du développement de laquelle les créateurs ont été trop paresseux pour concevoir l'arrière-plan des pages ? Et j'ai fait. Ça a l'air mauvais. Souvent, en raison de l'absence des divisions habituelles entre les différents types d'informations, celles-ci se mélangent et il n'y a tout simplement aucune envie d'examiner plus en détail une telle ressource Web.

Pour éviter qu'un tel désastre ne m'arrive, j'ai décidé d'écrire un article sur le sujet : « Comment faire un fond de page en html ». Après avoir lu la publication, vous apprendrez quels outils vous pouvez utiliser pour définir la conception de l'arrière-plan, comment fixer ou modifier l'arrière-plan, et bien plus encore qui contribueront à rendre votre site attrayant. Maintenant, commençons !

Outils de base pour définir l'arrière-plan des pages Web

Pour définir une image d'arrière-plan, les développeurs de langage Web ont fourni l'attribut background. Il est disponible en , et en CSS.

Dans le langage de balisage, il s'agit d'un attribut de la balise body, et dans les feuilles de style, c'est une propriété universelle qui permet de définir jusqu'à 5 caractéristiques d'arrière-plan en même temps. L'arrière-plan est un élément assez flexible qui peut être utilisé pour définir l'arrière-plan sous la forme d'une couleur unique, d'une image couleur ou même d'une animation.

Donc, pour définir l'image d'arrière-plan via l'unité HTML écrivez simplement le code suivant : ...

et au lieu des mots « adresse du fichier », insérez le chemin d'accès à l'image.

Attention toutefois ! Si vous souhaitez voir un canevas monochrome comme arrière-plan, spécifié par une valeur de la palette de couleurs, cela se fait à l'aide de l'attribut bgcolor.

Par exemple, ...

, nous avons défini un fond noir pour notre site.

Les couleurs en CSS et HTML sont spécifiées soit par un mot anglais (par exemple, rouge), soit par un code spécial, composé du signe # et de six caractères après celui-ci (par exemple, #FFDAB9).

Lorsque vous tapez la deuxième option dans un logiciel spécialisé pour développeurs, la palette apparaîtra automatiquement devant vous. Si vous venez de commencer à apprendre ces langages Web, vous pouvez rechercher le code couleur sur Internet.

Arrière-plan en tant que propriété dans les feuilles de style en cascade

Il est défini soit dans un fichier séparé avec des styles CSS, soit dans un élément

C'est sur cette note que nous pouvons résumer notre travail. Rejoignez les rangs de mes abonnés fidèles, posez des questions si quelque chose n'est pas clair, et ne soyez pas avide d'un lien vers mon blog, mais partagez-le avec vos amis. Je vous souhaite une agréable expérience d’apprentissage. Bye Bye!

Cordialement, Roman Chueshov