html
SAILOR FUKU
METTRE UNE IMAGE PAR DESSUS UN BLOC
Sachez que ce n'est pas difficile de le faire. A part savoir faire un bloc et insérer une image, il ne vous faut pas connaître beaucoup de bases pour réussir à mettre votre image par dessus votre bloc. Je ne mets cette partie ici que parce que ça demande un peu de patience et parfois beaucoup de tentatives pour réussir à mettre votre image à l'endroit exact que vous voulez.
Donc tout d'abord, vous devrez faire votre HTML le plus normalement possible. Voici un simple petit exemple de celui que je vais utiliser :
L'image que j'ai choisi est celle-ci :
NB : Je vous recommande d'utiliser des images à fonds transparents ( des .png). ça donnera un effet beaucoup plus joli qu'avec une image possédant un fond.
Rajoutez votre image normalement en dehors du bloc (en dessous par exemple), modifiez sa taille si nécessaire puis dirigez vous à la partie "style" dans "apparence".
Copiez/collez ce code :
position: relative; margin-top: -120px; margin-left: 500px;
Comme montré ici.
Les numéros soulignés varient d'un HTML à une autre, selon l'emplacement que vous voulez, la hauteur de votre bloc, de votre image, etc ..
Vous êtes donc obligés de les changer vous-même selon ce qui vous arrange. Cela peut parfois demander plusieurs tentatives (parfois c'est carrément frustrant pour moi, j'avoue)
NB : L'emplacement de votre image lors de la modification de HTML n'est pas la même après l'avoir sauvegarder. Vous devez donc enregistrer à chaque fois pour voir exactement où sera votre image, puis remodifier si nécessaire.
Une fois que vous aurez trouvé une position qui vous convient, vous aurez un résultat semblable à celui-ci :
NB : margin-top peut être changé par margin-bottom si nécessaire. margin-left peut-être changé par margin-right si nécessaire aussi. ça dépend vraiment de l'emplacement que vous voulez.