Image d'arrière-plan dans CSS
Dans CSS, le image de fond la propriété est utilisée pour définir l'image d'arrière-plan pour les éléments uniques ou multiples. Dans CSS, plusieurs propriétés peuvent être utilisées pour définir l'image d'arrière-plan. Certaines propriétés couramment utilisées sont indiquées ci-dessous:
- taille de l'arrière-plan la propriété est utilisée pour ajuster la taille de l'image d'arrière-plan.
- Répétition du fond la propriété permet ou désactive la répétition d'une image.
- Position de fond Spécifie la position d'une image.
Cet article présentera un aperçu complet de la propriété d'image d'arrière-plan, où vous apprendrez à ajouter une image d'arrière-plan à un seul élément ou à un corps entier.
Comment ajouter une seule image d'arrière-plan dans CSS
La propriété d'image d'arrière-plan est principalement utilisée avec l'élément corporel, mais il peut être ajouté à n'importe quel élément spécifique tel que les paragraphes, les titres, Div, etc. Pour ajouter l'image d'arrière-plan.
Exemple 1: Le morceau de code diable incorporera une image d'arrière-plan sur tout le corps:
Image de fond
Bienvenue à Linuxhint.com
Il montrera la sortie suivante:
Dans l'exemple donné ci-dessus, l'image a été placée dans le même dossier avec le fichier html donc, dans le URL Il ne prend que le nom de l'image avec son extension comme indiqué dans l'extrait suivant:
Maintenant, déplaçons l'image vers un autre dossier laissez dire "images":
Si l'image n'est pas là dans le même répertoire que nous devons spécifier le chemin complet de l'image, sinon nous n'obtiendrions pas les résultats souhaités.
Exemple 2: Au lieu de fournir le chemin complet, cet exemple essaiera d'accéder à l'image avec son nom uniquement:
Image de fond
Bienvenue à Linuxhint.com
L'image est placée dans les images. À partir de la sortie, il serait clair que si vous ne spécifiiez pas le chemin exact, vous n'obtiendriez pas les résultats souhaités comme indiqué ci-dessous:
Exemple 2: Examinons un exemple où l'image est présente dans le dossier Images tandis que le fichier HTML est là dans le dossier d'image en arrière-plan. Dans un tel cas, nous spécifions le chemin complet de l'image comme indiqué dans l'extrait suivant:
Image de fond
Bienvenue à Linuxhint.com
Dans l'URL vient d'abord deux points «…» que les états reculent un répertoire puis allez au "images" Répertoire où l'image est placée et à la fin le nom de l'image sera livrée avec son extension comme JGEG, PNG, etc. Maintenant, ce programme générera la sortie appropriée avec l'image d'arrière-plan comme indiqué ci-dessous:
De même, l'image d'arrière-plan peut être intégrée avec n'importe quel élément comme
,
, etc.
Comment ajouter plusieurs images d'arrière-plan dans CSS
Dans CSS, plusieurs images d'arrière-plan peuvent être ajoutées au même élément en fournissant plusieurs URL.
Exemple
Le code donné ci-dessous ajoutera plusieurs images sur l'élément corporel, en outre, il utilisera quelques propriétés supplémentaires comme le répétition d'arrière-plan, la taille de l'arrière-plan, etc. comme indiqué ci-dessous:
Image de fond
Bienvenue à Linuxhint.com
Le code ci-dessus utilise
- propriété de couleur pour définir la couleur dorée du texte,
- Image d'arrière-plan a ajouté deux images,
- taille en arrière-plan définissez la taille de l'image sur 600px,
- Position d'arrière-plan pour aligner la position de l'image au centre,
- et enfin le répétition d'arrière-plan prend «sans répétition», ce qui signifie que chaque image ne sera affichée qu'une seule fois.
En conséquence, il générera une sortie suivante:
De la sortie, vous pouvez clairement voir que le bleu.L'image JPG est derrière le Linuxhint.L'image JPEG, ce qui signifie que l'URL que vous écrivez en premier apparaîtra en haut tandis que la deuxième image sera affichée à l'arrière / derrière.
Conclusion
image de fond la propriété définit l'image d'arrière-plan pour les éléments uniques ou multiples. Afin d'implémenter une image d'arrière-plan, spécifiez simplement l'URL de l'image dans la propriété en arrière-plan-image.
Cet article a présenté un aperçu détaillé de la propriété d'image par arrière-plan. Initialement, il explique comment ajouter une seule image d'arrière-plan dans CSS. Par la suite, cette écriture a guidé comment définir plusieurs images d'arrière-plan pour un élément.