Conseils utiles

Comment faire rapidement et facilement une image de fond en utilisant HTML

Pin
Send
Share
Send
Send


Toute pièce aura l'air beaucoup mieux si elle est recouverte d'un tapis persan coûteux. Alors, quel est le pire de votre site? Peut-être que le moment est venu de «couvrir» son sol avec un élégant et cher palais fait main. Nous examinerons plus en détail comment créer un arrière-plan pour le site:

Sélection d'image

Je voudrais commencer par choisir une image. Pour que l'arrière-plan soit plus uniforme et plus beau sur la page, vous n'avez pas à vous soucier des dimensions et de l'alignement. Je suggère immédiatement de rechercher une texture homogène. C'est quoi

Malheureusement, il n'est pas possible d'étirer une image au format HTML en plein écran. La photo est utilisée en taille réelle. Si l'image est petite, alors elle pavera toute la zone, comme dans la capture d'écran ci-dessous. Pour agrandir l'image, vous devez créer un document CSS supplémentaire, sans cela, cela ne fonctionnera pas.

Bien que, vous avez la possibilité de contourner le système. Pour ce faire, utilisez Photoshop et redimensionnez l'image à la largeur de l'écran (1280x720). Bien que dans ce cas, lorsque vous faites défiler l'écran, l'image en remplace une autre.

Une meilleure option si vous ne voulez pas utiliser CSS serait d'utiliser des textures transparentes. Ils ne voient aucune articulation. Ils sont comme un papier peint ou une tuile moderne dans la conception. L'un remplace l'autre et aucune articulation n'est visible.

Si vous êtes intéressé par les images gratuites et l’absence de conséquences juridiques pour leur utilisation, je vous recommande de rechercher sur le site. Pixabay.com.

Travaillons maintenant avec le code. Je dois dire tout de suite que nous travaillons actuellement avec le langage HTML, c’est-à-dire que nous ne modifions pas l’image, mais pour l’ensemble du site, mais uniquement pour une page spécifique pour laquelle le code est en cours d’écriture. Si vous souhaitez modifier la totalité de la ressource, vous devez créer du code à l'aide de css, mais plus à ce sujet plus tard.

Donc, vous pouvez travailler dans le bloc-notes, je préfère le Bloc-notes ++. C'est beaucoup plus pratique d'y travailler: le code est ajouté pour vous, les balises sont en surbrillance. Le programme est gratuit et pèse environ 3 Mo. Je le recommande vivement, surtout si vous êtes débutant.

Donc dans la balise corps vous devez ajouter un attribut fond et spécifiez un lien vers l'image, d'où sera prise la photo. Voici à quoi ça ressemble dans le programme.

Vous pouvez simplement ouvrir le bloc-notes et copier ce code. Entre guillemets, mettez un lien vers la photo que vous aimez.

Image en fond de page - HTML

Considérons d’abord la méthode de définition de l’image d’arrière-plan sur le site en utilisant l’attribut fond tag corps:

Comme dans l'exemple ci-dessus, en plus de l'image, il est recommandé d'indiquer la couleur d'arrière-plan (celle-ci sera affichée sur le site lors du chargement de la page), qui sera combinée à l'image d'arrière-plan et créera un contraste avec le texte du site. Par exemple, si vous utilisez la couleur blanche du texte sur le site, vous devez spécifier une couleur d'arrière-plan sombre et une image d'arrière-plan sombre. Dans ce cas, le texte sera facile à lire.

Note: Il est recommandé de définir l'image et la couleur d'arrière-plan en n'utilisant pas HTML, mais CSS. Dans ce cas, le code sera valide et plus correct.

Image en fond de page - CSS

En CSS, la couleur et l'image d'arrière-plan peuvent être définies avec une propriété. fond:

Ici en utilisant la propriété pièce jointe le fond de page est corrigé, et en utilisant la propriété répétition de fond la répétition d'image horizontale est définie. Mais il convient de considérer que l’image d’arrière-plan doit bien "coudre" le long des bords.

Si vous souhaitez étendre l'image d'arrière-plan à la taille de la fenêtre du navigateur, utilisez la propriété taille du fond: 100%,

Dans le générateur de sites Nubex, vous pouvez utiliser une grande image en tant qu'arrière-plan et le corriger, quel que soit le site.

Contexte du site

Il se trouve que l'ancien design du site est déjà ennuyeux. Et je veux quelque chose de nouveau et de bon. Et le nouveau design sera tel si vous le cuisinez vous-même.

Mais changer complètement la conception de la ressource vous-même est une chose ingrate. Et tout le monde n'a pas les mains aiguisées dans cette affaire. Par conséquent, il est plus facile d'actualiser l'ancien modèle en modifiant la couleur d'arrière-plan de la ressource ou son image d'arrière-plan.

Il y a plusieurs façons de changer l'arrière-plan du site. Pour ce faire, utilisez les fonctionnalités de CSS ou html. Cependant, bon nombre des propriétés permettant d'utiliser l'arrière-plan ont le même nom et la même méthodologie d'application dans ces technologies Web.

Bases de base html

Vous pouvez utiliser plusieurs éléments en arrière-plan:

  • Couleur
  • Image de fond
  • Image de texture.

Nous traiterons chacun d’eux plus en détail.

Afin de définir la couleur d'arrière-plan du site, la propriété background-color du style de l'attribut style est utilisée. En d'autres termes, pour définir la couleur principale d'une page Web, vous devez l'enregistrer à l'intérieur de la balise. Par exemple:

HTML ne prend en charge que 16 mots-clés pour la couleur. En voici quelques-uns: blanc, rouge, bleu, noir, jaune et autres.

Par conséquent, afin de définir l’arrière-plan du site HTML, il est préférable d’utiliser le format hexadécimal ou RVB.

En plus de la sélection des couleurs, d'autres paramètres sont également disponibles. Si la propriété background-color est définie sur transparent, l'arrière-plan de la page deviendra transparent. Cette valeur est attribuée à cette propriété par défaut.

Examinons maintenant les possibilités du langage hypertexte pour définir le fond d'écran du site. Cela peut être fait en utilisant la propriété background-image.

Supposons que nous développions un site sur la poésie et que nous devions utiliser une image de Pegasus comme substrat. Le cheval ailé incarnera la liberté de la pensée créatrice du poète!

  • repeat-x - répète l'image de fond horizontalement,
  • repeat-y - verticalement
  • répéter - sur les deux axes,
  • no-repeat - la répétition est interdite.

Parmi les options énumérées, nous nous intéressons à ce dernier. Avant de changer l’arrière-plan du site, nous l’utilisons dans notre code:

  • Mot-clé (haut, bas, centre, gauche, droite),
  • Pourcentage - le compte à rebours commence à partir du coin supérieur gauche,
  • En unités de mesure (pixels).

Nous utilisons l'option de centrage la plus simple:

Il arrive que vous ayez besoin de fixer la position de l'image lors du défilement. Par conséquent, avant de transformer une image en arrière-plan du site, utilisez la propriété spéciale background-attachment. Les valeurs qu'il accepte sont:


  • faire défiler
  • fixe.

Nous avons besoin de la dernière valeur. Maintenant, le code de notre exemple ressemblera à ceci: [/ HTML]

Fond de site textural

Dans le premier exemple, pour l'arrière-plan, nous avons utilisé un vaste et magnifique paysage désertique. Mais pour une telle beauté, vous devez payer en totalité. Le poids d'une image faite en haute qualité peut atteindre plusieurs mégaoctets.

Ce montant n’affecte pas la vitesse de chargement de la page du navigateur disposant d’une connexion Internet haut débit. Mais qu'en est-il de l'Internet mobile, pour lequel le téléchargement de quelques "compteurs" prendra beaucoup de temps?

Tous ces problèmes sont résolus en utilisant un fond de texture. Il utilise une petite image comme motif de texture. Même s'il se répète plusieurs fois, le dessin n'est chargé qu'une seule fois.

Pour créer un arrière-plan sombre pour le site, accédez à Photoshop, créez une image sous forme de bande de 1200 pixels de long sur 15 pixels de large. Appliquez ensuite un simple dégradé de noir et blanc et connectez la texture obtenue à la page du site:

Pour plus de clarté, nous avons ajouté du texte et défini sa couleur à l'aide de la propriété color. Voici ce qui s'est passé:

Outils CSS

Toutes les propriétés décrites ci-dessus sont également applicables aux feuilles de style en cascade. Créez l’arrière-plan du site css en réécrivant le code d’un de nos exemples précédents:

Le résultat sera similaire.

Eh bien, ici nous avons examiné toutes les options pour changer le fond du site. Maintenant, il ne reste plus qu’à créer un dessin du futur tapis et à le diffuser sur les pages de votre ressource. Mais c'est déjà à vous de décider.

Regarde la vidéo: COURS COMPLET HTML ET CSS 4271 - Images de fond et gestion du fond (Août 2020).

Pin
Send
Share
Send
Send