Utilisation de CSS pour définir une image d'arrière-plan

• Avril 30, 2024

Vous êtes-vous déjà demandé comment les sites Web gèrent ces jolis dessins et images flottant derrière le texte? Tout est fait grâce à la magie des feuilles de style en cascade. CSS ne vous permet pas seulement de désigner une image pour l'arrière-plan de votre page, il vous permet également de modifier la façon dont l'image est affichée - afin que vous puissiez obtenir exactement l'apparence que vous souhaitez.

La pierre angulaire de votre image d'arrière-plan est, à juste titre, la propriété «background-image». Vous utilisez cette propriété pour indiquer à votre site où se trouve le fichier image, comme suit:

corps {
background-image: url ("image.gif");
}

C'est tout ce que vous devez faire pour placer une image d'arrière-plan pour votre page Web. Bien sûr, vous souhaiterez probablement personnaliser l'apparence de l'image. Supposons que vous souhaitiez que votre image commence en haut de la page mais soit centrée horizontalement au lieu d'être alignée à gauche (l'alignement par défaut). Dans ce cas, vous souhaiterez ajouter la propriété 'background-position' à votre règle CSS:

corps {
background-image: url ("image.gif");
position d'arrière-plan: centre haut;
}

Lors de la définition de la propriété 'background-position', la première valeur définit l'alignement horizontal (gauche, centre ou droite) et la seconde définit l'alignement vertical de l'image (haut, centre ou bas).

Ensuite, vous décidez que vous voulez empêcher l'image de se recouvrir (se répéter) horizontalement, bien que vous souhaitiez qu'elle se réponde verticalement. Il est temps de faire ressortir la propriété 'background-repeat':

corps {
background-image: url ("image.gif");
position d'arrière-plan: centre haut;
background-repeat: répéter-y;
}

Définir la valeur sur `` répéter-y '' indique au navigateur de placer l'image d'arrière-plan le long de l'axe y, alias verticalement, mais pas sur l'axe x (horizontal), ce qui est exactement ce que nous voulions. Si vous vouliez le carreler horizontalement mais pas verticalement, vous utiliseriez la valeur 'repeat-x' à la place; si vous ne vouliez pas du tout que l'image se mette en mosaïque, donnez-lui la valeur «sans répétition». La valeur par défaut est de carreler l'image à la fois horizontalement et verticalement, donc si c'est le meilleur choix pour votre image, vous n'avez pas du tout besoin de définir la propriété 'background-repeat'.

Enfin, vous pouvez jeter un œil à la propriété 'background-attachment'. Par défaut, votre image défilera au fur et à mesure que la page défile, donc si vous ne répétez pas l'image verticalement et que vous avez une longue page, votre image ne s'étendra pas au bas de la page. Vous pouvez changer cela en définissant la propriété 'background-attachment' sur 'fixed', ce qui fait que l'image d'arrière-plan reste au même endroit sur le moniteur, quelle que soit la façon dont la page défile. Maintenant, vos règles d'image d'arrière-plan ressembleront à ceci:

corps {
background-image: url ("image.gif");
position d'arrière-plan: centre haut;
background-repeat: répéter-y;
attachement de fond: fixe;
}


Si vous souhaitez conserver vos règles CSS aussi petites que possible, vous pouvez combiner toutes vos valeurs d'arrière-plan sur une seule ligne en utilisant la propriété «background», comme ceci:

Contexte {
url ("image.gif") répéter-y fixe centre haut;
}

Lorsque vous utilisez la propriété 'background', vous devez répertorier les valeurs dans un ordre spécifique:
[couleur d'arrière-plan (si utilisé)] [image d'arrière-plan] [répétition d'arrière-plan] [pièce jointe d'arrière-plan] [position d'arrière-plan]. Vous pouvez omettre toute valeur dont vous n'avez pas besoin, il vous suffit de répertorier toutes les valeurs que vous utilisez dans le bon ordre ou la règle ne fonctionnera pas.

Instructions Vidéo: [CSS] Mettre un fond à la page + opacité (Avril 2024).