Bonjour,

je cherche à faire un site dont les élements sont positionnés en fonction de l'image de fond. Le résultat est bon sur mon PC mais dès que la résolution change, plus aucun élements n'est à sa place.
Le css pour mon image de fond est le suivant :

  background-image: url(../img/VIOLETHAUTcopie.png);
  background-size: cover; // J'ai aussi essayé avec 100% et contain
  background-repeat: no-repeat;

Merci pour votre aide !

Ce que je veux

Une image de background et des élements positionnés de cette manière : https://ibb.co/Zh7Tj07

Ce que j'obtiens

En 4k par exemple : https://ibb.co/Vq66Px8

3 réponses


Difficile à dire sans le code de la page mais si tu utilises tes div uniquement pour afficher des images alors il vaudrait mieux utilise des balises img et les rendre responsive.

marto
Auteur

Je ne comprends pas en quoi utiliser une balise img simple plutot qu'un div avec un background changerait quelque chose, tu saurais m'expliquer ?
Je peux partager le code si tu veux, mais c'est un peu long

Sémantiquement c'est plus correct et tu peux ajouter des alt pour l'accessibilité etc.

Pour exemple regarde Responsive images de Bootstrap.