Comment créer une image d'arrière-plan réactive en plein écran dans le développement front-end ?

Création d'une image d'arrière-plan réactive en plein écran

En tant que débutant dans le développement front-end, obtenir une image d'arrière-plan réactive en plein écran peut être un défi. Voici comment vous pouvez corriger les problèmes dans votre code :

Analyse du code :

Le code HTML et CSS fourni inclut plusieurs éléments dans le div "main-header", qui est destiné à contenir l’image d’arrière-plan. Cependant, les paramètres de l'image d'arrière-plan ne sont pas appliqués à ces éléments.

Solution :

Pour faire de l'ensemble du div "en-tête principal" une image d'arrière-plan plein écran, le CSS devrait être révisé comme suit :

.main-header {
  background-image: url(../img/bb-background2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

Mobile Réactivité :

Pour positionner le div "large-6 large-offset-6 columns" au-dessus de l'image d'arrière-plan sur les appareils mobiles, vous pouvez utiliser la requête média CSS suivante :

@media screen and (max-width: 767px) {
  .large-6.large-offset-6.columns {
    position: absolute;
    top: 0;
  }
}

Approches alternatives :

Plusieurs techniques alternatives peuvent être utilisées pour créer une image d'arrière-plan plein écran qui évolue responsively :

• Image d'arrière-plan CSS : Définissez la propriété background-image directement sur l'élément body.
• Balise Img : Utilisez un balise img avec le CSS approprié pour remplir toute la fenêtre d'affichage.
• jQuery : Utilisez jQuery pour ajustez les dimensions et le positionnement de l'image de manière dynamique en fonction de la taille de la fenêtre.

Ressource recommandée :

Pour plus d'informations, reportez-vous à l'article suivant : http:/ /css-tricks.com/perfect-full-page-background-image/

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!