Bonjour !
J'aimerais mettre une image sur mon site qui serait en bas à gauche de l'écran et au dessus de tout (tableau, texte, autres images...) mais qui ne bougerait pas même sil'on bouge la barre de défilement.

Comment faire en CSS ? Faut-il mettre l'image dans le CSS ou dans le html ?

Merci d'avance.

Salut,

Vois (ou revois) le cours de M@teo21. Plus particulièrement la propriété CSS background-attachment.

En l'occurence, pour ce que tu veux faire, la valeur à donner à cette propriété est fixed.



@++

Je sais, mais le problème est que je veux une image en fond + une image en bas à droite de l'écran... L'image en fond n'étant pas fixed, l'autre image l'étant... C'est pour cela que je bloque...
De plus, background est derrière tout et je voudrais que mon image soit au dessus de tout...

Dans ce cas, il te faut utiliser la propriété z-index qui permets de superposer tous les éléments positionnables.

J'ai une solution, mais qui ne marche pas sur IE :

Pour garder une image fixe à l'écran, la seule solution est d'utiliser la propriété position : fixed (au même titre que absolute ou relative)et la position à l'écran.



J'espère que ça suffira

Euh, ça ne marche pas, je ne comprends pas...
Je la met ou dans le html l'image ?

En fait, une position : absolute fonctionne comme une position : fixed. Il te faut définirl'emplacement de l'écran où tu places ton image, dans mon exemple, à 0px de hauteur et 0px de largeur. Le code présenté est à intégrer dans le css, mais pour qu'il fonctionne, il faut définir une id pour ton imag, donc taper

puis définir les propriétés du div de ton image à l'aide du css que je t'ai montré

Oui, mais il faut le mettre à quel endroit dans le html ? Parceque là, ça ne marche pas, que je le mettes juste après body ou juste avant la fin de body, l'image n'est pas "fixed" et elle ne se met pas au dessus du reste, ça laisse la place pour l'image...
Il n'y a pas de fonction en css permettant de mettre une image autre que le background ?

Déja met un z-index: 500; plutôt pour que l'image soit au dessu, et non pas 1.

Après, normalement tu peux placer ton image n'importe où, je serai tou je la mettrai juste après l'ouverture de la balise body, mais de toute manière ça n'a pas d'importance vu qu'elle est fixée !

J'ai essayé et ça n'a pas marché. J'ai essayé de remplacer le id par une class et le fixed marche. Mais par contre, dans les deux cas, top et left ne fonctionnent pas...
Quelqu'un sait pourquoi ?

up

Essaie avec cela :
Dans le css :

Et dans le html :


Donne nous le résultat

J'utilise Firefox. Merci beaucoup, ça marche ! Euhhh, par contre, sur ie, comme ça ne marche pas, ce serait possible de ne pas mettre l'image du tout (sur ie uniquement) ? Si oui, comment ?

La propriété css !important devrait résoudre ton problème :
Seuls les navigateurs autres que ie interprètent cette propriété, et ce n'est pour une fois pas plus mal : la propriété !important signale normalement au navigateur, si il y a deux instructions css qui se contredisent (par exemple : que la propriété marquée!important est la bonne. En ce qui te concerne, il s'agit de l'affichage ou non de ton block de fond.

Naturellement, si tu ne touches à rien, le bloc vient se positionner tout en bas de la page sur ie. Or, comme on veut ne pas l'afficher du tout, il faut rajouter une propriété css uniquement valable pour ie : en l'occurence, on va exécutern un display : none uniquement compréhensible par ie, puisque on va rajouter aussi un display : block !important qui sera valable pour tous les navigateurs, sauf ie, qui lui, restera sur le display : block

Rien dne vaut mieux qu'un p'tit code



Et toujours len même code html

Merci beaucoup ! J'ai fini le design, plus qu'à remplir le site.