Icones qui ne se séplacent pas avec le background

judkil21
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

Alainpre

Si j'ai bien compris le problème (ce qui n'est pas sûr), je pense qu'il faudrait retirer background-attachment: fixed; et replacer position:fixed par position:absolute pour que la carte et les icones défilent ensemble.
Plus d'infos : http://stylescss.free.fr/v2-properties/background-attachment.php
et http://stylescss.free.fr/v2-properties/position.php

J'espère que ça aidera.

judkil21
Auteur

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

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
Auteur

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.

judkil21
Auteur

J'aimerai obtenir cet effet : https://www.w3schools.com/howto/tryhow_css_parallax_demo_none.htm : L'icône reste sur la cappuche peut importe le mouvement d e la page.