Maison >interface Web >Tutoriel d'amorçage >Comment définir l'image d'arrière-plan dans bootstrap

Comment définir l'image d'arrière-plan dans bootstrap

藏色散人
藏色散人original
2019-07-15 11:19:3922091parcourir

Comment définir l'image d'arrière-plan dans bootstrap

Comment configurer l'image d'arrière-plan pour qu'elle s'adapte automatiquement dans le bootstrap

Navigateur : chrome

Utilisez CSS : bootstrap (cela peut affecter nos paramètres CSS, je vais donc le mentionner)

Dans le processus de définition des images d'arrière-plan, je constate souvent que l'image d'arrière-plan ne peut pas s'adapter automatiquement à l'écran comme je le souhaite. Moi aussi Après avoir essayé de nombreuses méthodes, j'ai trouvé un paramètre qui convient à ma situation.

Le code est le suivant :

body {
  background-image: url("../images/backgroundImg2.jpg");
  background-position: center 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
}

De cette façon, l'image d'arrière-plan du corps peut être réglée avec succès pour s'adapter automatiquement à l'écran.

Cependant, je n'ai pas confirmé si d'autres navigateurs sont compatibles. Il est actuellement disponible sur Chrome.

Attributs associés :

L'attribut background-image définit l'image d'arrière-plan de l'élément. L'arrière-plan de l'élément

occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges.

Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.

Conseil : Veuillez définir une couleur d'arrière-plan disponible afin que la page ait de bons effets visuels même si l'image d'arrière-plan n'est pas disponible.

Recommandations associées : "Tutoriel bootstrap"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn