Image PNG réactive sur l'image d'arrière-plan ?

Question

J'essaie de créer un design de page comme celui-ci : cliquez sur

En fait, j'ai réussi. Le problème est que lorsque je change la résolution de la page Web, les éléments se chevauchent, le div d'arrière-plan et le PNG se comportent différemment et tout semble horrible. (J'ai essayé d'utiliser position:absolute(PNG) et position:relative(background))

Answer 1

Vous pouvez utiliser les propriétés CSS background-size et background-position. Vous devriez essayer de cette façon :

body {
  background-image: url("your-bg-image.jpg");
  background-size: cover;
  background-position: center;
}

.responsive-image {
  background-image: url("your-image.png");
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
}