Je veux un fond bleu avec l'image au-dessus de l'arrière-plan, puis le texte au-dessus de l'image.

Voici le code:

body {
  background-color: blue;
}

#some-text {
  color: red;
  z-index: 3;
}

#display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('./some-image.jpg'); 
  z-index: 2;
 }
<body>
 <div id="some-text">TEXT</div>
 <div id="display"></div>
<body>

Ce qui me pose problème, c'est que le texte a un fond bleu.

Définir l'arrière-plan du texte sur transparent ne le corrige pas.

Qu'est-ce que je fais mal ici?

css
0
Adam White 23 mai 2018 à 20:32

3 réponses

Meilleure réponse

Définissez le div avec un identifiant de #some-text sur position: relative, vous devez également donner le div avec un identifiant de #display a width et height.

body {
  background-color: blue;
}
#some-text {
  color: red;
  z-index: 3;
  position: relative;
}
#display {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('http://via.placeholder.com/350x150'); 
  z-index: 2;
  height: 100%;
  width: 100%;
}
<body>
  <div id="some-text">TEXT</div>
  <div id="display"></div>
</body>
0
patrickojeh 23 mai 2018 à 22:55

Vous pouvez utiliser plusieurs arrière-plans comme ceci:

body {
 margin:0;
 height:100vh;
 line-height:100vh;
 background-image:url(https://picsum.photos/200/200?image=1069);
 background-position:center;
 background-size:auto;
 background-repeat:no-repeat;
 background-color:green;
 text-align:center;
 color:#fff;
 font-size:25px;
}
Some text here
0
Temani Afif 23 mai 2018 à 21:17

Définissez la couleur d'arrière-plan de # some-text div sur blanc.

#some-text {
    color: red;
    z-index: 3;
    background-color: white;
}
0
Nandita Sharma 23 mai 2018 à 17:35