Si vous cherchez à ajouter des images avec CSS, vous devriez déjà avoir des connaissances préliminaires sur la façon d'utiliser le HTML de base.

Les connaissances préliminaires comprennent: l'utilisation de balises simples telles que

et

. Celles-ci ne devraient pas être déroutantes pour vous à ce stade – et si elles le sont, il est préférable de commencer par le tutoriel pour les débutants sur la façon d'utiliser CSS.

Le tutoriel vous guidera avec les bases afin que vous puissiez arriver à cette section totalement préparée pour ce que nous avons à couvrir. Plus important encore, le guide ne devrait pas vous prendre le temps de lire et de pratiquer – il est conçu dans un souci de convivialité et de lisibilité.

Maintenant, pour ceux d’entre vous qui sont prêts et qui ont déjà couvert les bases, commençons. Comme vous le savez peut-être (et devriez le savoir), les images sont des images qui se trouvent sur des pages Web. Bien qu'il puisse sembler que le propriétaire de la page Web copie et colle probablement l'image sur la page, il se passe en fait beaucoup plus que ce que vous pensez.

Les images sont ajoutées à une page Web via un lien et l'espace de stockage, qui est l'endroit où l'image apparaît sur la page, est conçu par la balise d'image . Cette balise fournit l'espace de stockage ou la référence pour votre image.

Quand on pense aux images en termes d'apparition après le chargement d'une page, le concept est en fait assez simple. Une fois que quelqu'un charge une page Web via une URL, le navigateur à cette seconde atteint le serveur Web, récupère l'image et l'ajoute à la page.

La plupart des gens savent comment ajouter des images au texte via des programmes tels que Microsoft Word. Dans Word, vous insérez essentiellement l'image dans le document et, par conséquent, il s'agit d'un morceau du document lui-même. Une fois que vous avez enregistré le fichier Word sur votre ordinateur, il ne vous reste plus qu'à vous assurer que le fichier reste sur votre ordinateur. Lorsque vous ouvrez le programme de sauvegarde, l'image est sur la page et c'est tout.

Sinon, si vous utilisez une page HTML, il y a un peu plus de travail à faire. Avec la page HTML, vous devez référencer les images en utilisant le marque. Avec ce système, votre travail consiste à vous assurer que les images sont toujours liées à la page et qu'elles restent au même endroit que vous leur avez désigné. Des problèmes surviennent lorsque quelqu'un falsifie le chemin d'accès à la page HTML et à l'image référencée. Pour mettre le problème en perspective, cette falsification se produit lorsque vous voyez cette image après avoir chargé une page Web:

erreur d'image

Cette icône devrait vous être assez familière – et maintenant vous savez pourquoi cela se produit. Pour réparer ce problème, vous devez corriger la connexion entre la page HTML et l'image référencée. Une fois que vous l'avez réparé, le navigateur pourra trouver l'image que vous référencez sur le marque.

Maintenant que vous connaissez les mécanismes de chargement d'images sur une page Web, passons aux informations pratiques que vous attendiez:

Insérer des images dans votre page Web à l'aide de CSS

L'avantage de cette étape du processus est qu'elle est très simple à comprendre et à suivre. De plus, c'est une ressource puissante qui vous permettra de mieux contrôler votre page Web et le processus de création de site Web. Lorsque vous utilisez CSS, vous remarquerez que les niveaux de bloc et les éléments en ligne (balises) sont des fonctionnalités qui permettent d'insérer des images dans ces derniers. Pour ceux qui ne le savent pas, les balises de niveau bloc sont désignées par:

et

.

Bien qu'une approche vous permette d'insérer les images dans le niveau de bloc ou les balises en ligne, vous trouverez peut-être préférable de vous en tenir aux balises de niveau de bloc. Dans l'ensemble cependant, il n'y a pas beaucoup de différence – c'est vraiment une préférence personnelle. Que vous utilisiez l'un ou l'autre n'a pas d'importance car n'importe quelle balise peut être modifiée en une balise de niveau bloc ou une balise en ligne. Voici le processus de modification d'une balise en une balise de niveau bloc:








bloc de visualisation;

Si vous deviez le faire en ligne, cela ressemblerait à ceci:








affichage: en ligne;

Comme vous pouvez le constater, insérer des arrière-plans et insérer des images est essentiellement le même processus. Vous pouvez également le faire avec n'importe quel élément que vous aimez. N'oubliez pas d'ajouter un peu de remplissage supplémentaire pour pouvoir ajouter un titre à votre image.Si vous deviez le faire pour en ligne, cela ressemblerait à ceci:

Voici un exemple de la technique ci-dessus en action:





Placement d'image CSS





Du texte …
Encore du texte ...

Par souci de simplicité, ce que vous voyez ci-dessus est le code CSS qui a été inséré dans la page Web. Alors que l'approche typique serait d'ajouter le code CSS dans un fichier CSS séparé, puis de créer un lien vers celui-ci afin de réutiliser le code sur d'autres pages Web, c'était juste une façon plus simple de le faire.

Quelques points à signaler à propos du code ci-dessus: ici, vous remarquerez qu'il y a une image de fond pour chaque ID (titre 1 et titre 2). De plus, il y a aussi une augmentation du remplissage (padding.top:68px) qui fonctionne pour pousser le texte vers le bas. Le texte ici doit être poussé vers le bas afin qu'il y ait suffisamment d'espace pour l'image d'arrière-plan.

Si les choses ne semblent pas claires, la meilleure chose à faire serait de vérifier le code source et de travailler dessus vous-même. Vous pouvez modifier les chiffres comme le numéro de remplissage. En faisant cela, vous pourrez voir les modifications apportées à la page Web elle-même. Si vous vous demandez pourquoi un remplissage de 68px a été utilisé sur cette page, car elle est haute, le point essentiel à retenir est que vous pouvez utiliser n'importe quel nombre que vous aimez. En modifiant les chiffres, vous pouvez obtenir le placement qui vous convient le mieux.

Enfin, il peut être utile de garder à l'esprit que le remplissage n'influence pas l'image d'arrière-plan. Ce qu'il affecte, c'est le contenu à l'intérieur de l'élément de balise. Dans le cas ci-dessus, vous remarquerez qu'un

tag a été utilisé.

À ce stade, vous devez être bien familiarisé non seulement avec les bases du HTML et du CSS, mais également sur ce que signifie ajouter des images à une page Web, les balises utilisées et les informations détaillées qui vont avec. Si vous souhaitez continuer, la section suivante que nous allons couvrir est l'utilisation de CSS dans les pages Web.

Continuer