Dev Faq
0
votes

Comment ajouter une image d'arrière-plan dans une colonne div

J'ai créé deux colonnes inégales qui flottent à côté de l'autre. La plus petite colonne de droite je suis heureux avec cependant, je veux ajouter une image d'arrière-plan à celle de gauche, mais cela ne semble pas fonctionner.

J'ai essayé d'utiliser le même code que la colonne de droite et faire style = image de fond: ... mais cela n'a pas fonctionné. Il ne fonctionnait que si j'avais la couleur de fond. xxx

Je voudrais que l'image remplisse l'arrière-plan de la colonne à gauche mais qui montre maintenant vide.

merci

2 commentaires

.Column Gauche devrait être .column.left pour commencer par. De plus, la div n'a pas de taille à l'heure actuelle.

@Paulie_d - Bon endroit, j'espère que ça ne vous dérange pas que je le voler et mettre une description plus détaillée dans ma réponse

3 Réponses :

2
votes

Votre URL (...) code> devrait être une URL complète ... sinon vous essayez de charger un fichier local à votre domaine.

SO SE MISE À JOUR ... 

<div>
  <div class="column left"></div>
  <div class="column right"></div>
</div>
.column {
  float:left;
  width:50%;
  height:100vh;
}
.left {
  background-image: url('http://i.imgur.com/k5gf0zz.jpg');
  background-size:cover;
  background-position:center;
}
.right {
  background-color:#FDE4EC;
}

4 commentaires

Merci beaucoup, puis-je demander comment le centrer correctement dans la colonne?

Voir le code des extraits modifiés (utilisez Position d'image )

oh désolé je suis nouveau ici je n'ai pas réalisé

Ne vous excusez pas ... J'ai édité ma réponse pour inclure la «Code> Position d'image CSS dans l'extrait. Développez-le en cliquant sur "Afficher le code SNIPPET", puis vous pouvez l'exécuter pour le voir en action

0
votes

Cela fonctionnera pour vous. Votre URL n'a pas été déclarée correctement. De plus, vous utilisez Bootstrap et dans la classe de lignes, vous devez ajouter une classe pour diviser l'écran en gauche et à droite. J'ai essayé de rendre votre structure de code un peu mieux. jetez un coup d'oeil s'il vous plait.

p> 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">



<div class="row">
  <div class="col-sm-6 column left">
    left
  </div>
  <div class="col-sm-6 column right" style="background-color:#FDE4EC;">
    right
  </div>
</div>
</div>

1 commentaires

Veuillez expliquer ce que vous avez fait pour réparer le problème de l'OP, plutôt que de simplement donner du code et qu'attendre que les gens travaillent à savoir quelle est la différence

0
votes

Essayez ceci:

html strong> p> xxx pré>

CSS fort> p> 

.column.left {
  background-image: url("https://i.imgur.com/k5gf0zz.jpg");
  background-size: cover;
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;
}

.column.right {
  width: 100px;
  height: 100px;
  display: inline-block;
  position: relative;

}

2 commentaires

Pourquoi utilisez-vous CodePen quand cela fournit Snippets ?

@freefaller excuses comme je suis nouvelle pour ainsi dire et j'ai l'habitude d'utiliser CodePen. Va essayer la prochaine fois. Merci pour l'info BTW.

Articles qui pourrait vous intéresser :

Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO
Select2 ne s'affiche pas correctement dans le mode bootstrap
Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Comment puis-je définir un format pour les nombres d'entrée dans Blazor