Icones qui ne se séplacent pas avec le background

Par judkil21, il y a 7 ans

Les bases HTML/CSS

Bonjour,

Mon background est une carte du monde sur laquelle j'ai inséré des liens où cliqué sur chaque pays. Cependant, je voudrais que mes icônes bougent en même temps que mon background.

Car quand je bouge ma page, mes icônes elles restent fixent et par conséquent l’icône de la France ne se trouve plus au niveau de la France sur mon background.

Est ce que quelqu'un aurait une astuce ? :)

HTML
<body>
<div class="France"> <a href="pagefrance.html">France</a></div>
</div>
</body>

CSS
html
{
margin-left: auto;
margin-right: auto;
width: 1232px;
overflow: scroll;
background-attachment: fixed;
background-repeat: no-repeat;
background-image: url("mapmonde.jpg");
font-family: Verdana, sans-serif;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

.France
{
position: fixed;
bottom: 300px;
right: 300px;
font-size: 18px;
}

Cordialement,

5 réponses

judkil21, il y a 7 ans

Salut !

Merci pour l'information !!

Il s'agit, après plusieurs recherches, d'un problème de parallaxe. Mais même en supprimant background-attachment: fixed et et replaçant position:fixed par position:absolute le problème est toujours présent. Le background grossit ou rétrécit bien quant j'agrandis ou retrécie la page. Mais les icônes elles gardent une position fixe (via leurs coodronées : position: absolute; bottom: 300px; right: 300px; font-size: 18px;)
par rapport à mon écran.

Cordialement,

Alainpre, il y a 7 ans

Ha tu n'avais pas dit que tu zoomais. Je pensais que tu faisais défiler la page avec les ascenseurs. :-(
Donc oui le problème est différent.

judkil21, il y a 7 ans

Le background suit la taille de la fênetre, mais les icônes elles restent fixer, à une position en fontion de leurs bottom et leur right, sans suivre le redimensionement de la fênetre. J'aimerai si possible que les icônes aient une position qui se redimentionne/ se repositionne en fonction de la fênetre.