Discussion :

[NouveauDev]

Bonjour,

Je suis en train de créer un petit site web et je désespère sur un souci ..

J'ai une image de fond que j'essai de mettre en responsive.
En cherchant j'ai trouvé un petit code pas trop mal, le souci est que quand je redimensionne ma fenêtre, la partie gauche de mon image est un peu "bouffé".
Donc premier problème.
Voici le code :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
body{
margin :0;
padding :0;
background:url('mon image') no-repeat center fixed;
background-size: cover;
}

Ensuite, sur cette image, je met d'autres images cliquables.
Je les place mais une fois que je redimensionne ma fenêtre, mes images ne sont plus au bon endroit.
code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="imgg">
    <a Href="mapage.php"><img class="ImgClic" src="MonImg.jpg"/></a>
</div>

Code css :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.ImgClic{
width : 5%; 
	height: 5%;
	top : 40%;
	left: 20%;
}

Quelqu'un pourrait m'aider à trouver une solution ?

[vidia]

Bonjour, alors tout d'abord ne fait pas confiance a ce que ton navigateur affiche, sans avoir correctement écrit tes instructions, je veux dire par la que certain de tes problèmes peuvent peut être résolu en écrivant ton code comme ceci :
Pour le premier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
body{
  margin :0;
  padding :0;
  background:url('mon image.jpg') no-repeat center fixed;
  background-size: cover;
}

Ici j'ai mis une extension a ton image, cela peut être .png etc ensuite pour le second code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class="imgg">
    <a href="mapage.php"><img class="ImgClic" src="MonImg.jpg"/></a>
</div>

C'est href et pas Href.

Enfin pour la dernière portion de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.ImgClic{
  width : 5%; 
  height: 5%;
  position : /*ICI tu met relative, absolute, fixed */
  top : 40%;
  left: 20%;
}

Mettre des instructions top et left sans une position je ne vois pas l'interêt.

Voila change déja ca, je ne connais pas ton niveau en html-css d'ou mes réponses.. désolé si tu maitrise déja bien le sujet et de ce fait ton problème relève d'autre critères

[NouveauDev]

Bonjour et merci pour votre réponse.

Pour le premier, j'avais bien mis l'extension.
Pour le second j'ai bien mis href (erreur de recopie).
Pour le dernier en effet j'ai oublié de vous mettre la position.

Cependant j'ai toujours le souci avec le responsive...

Je vous remercie pour vos réponses.

[NouveauDev]

Bon, mon image en fond d'écran est responsive.
Code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
Body{
   background:url('mon-image.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   width:100%;
   height:auto;
   padding-left:400px;
   margin:0;
   padding:0;
}

L'image que je place dessus ne suit toujours pas l'image...

Imaginons que j'ai un fond d'écran "carte" et que je place une image "Point" sur Floride, j'aimerais que lorsque je réduis ma fenêtre, l'image "Point" reste sur Floride.
Ci dessus, le css de mon image "carte".
Si dessous, le css de mon image "Point".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.Point {
	width : 50px;
	height: 50px;
	position: relative;
	top : 610px;
	left: 500px;
	max-width: 40px;
	min-width: 40px;
}

Quelqu'un pour m'aider ?

[psychadelic]

comprends pas, l'utilisation de l'instruction css background-position: center center; ne te plais pas ??

[vidia]

Si j'ai bien compris, en prenant ton exemple tu souhaite que l'on puisse cliquer sur l'état de floride uniquement sur une image de fond qui est une carte.
Pour ce genre de comportement en gardant le coté responsive, c'est particulier, je te conseil donc de te renseigner sur la balise HTML map et la balise area qui lui est associé et qui me semble convenir parfaitement a ton problème,tu devras également penser à ne pas mettre l'image en fond par css mais mettre l'image en passant par une balise img.

Un petit lien :
https://developer.mozilla.org/fr/doc...ML/Element/map

"L'élément HTML <map> est utilisé avec des éléments <area> afin de définir une image cliquable divisée en régions."
Autrement dit tu t'arrange pour rendre ton image responsive, et les area a l'interieur s'y adapte et seront responsives