Suivez les fils RSS
 
Auteur
ezra
# 02 Feb 2012 - 20:01:42
Citer
3 Posts
Bonsoir,

Le problème est simple, je voudrait faire en sorte d'avoir une image en background, qui s'étire selon la résolution de chacun, mais que son rapport largeur/hauteur de base, lui ne soit pas changé.

Pour ce, j'ai utilisé une <img id="fond">
et mon css ressemble actuellement à ça :

img#fond {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}


voila, comme on peut s'en douter l'image s'étire a volonté, mais se retrouvera trop déformée si un utilisateur à un écran vraiment large.

si vous avez des propositions, en ce qui me concerne je crois que j'ai tout essayé, j'ai googlé a tout va, et je trouve rien non plus ici sur le forum d'alsa'.
Alors à défaut de trouver une solution, je me suis dit : inscris-toi sur alsacréations c'est le moment.
Merci d'avance.

^
Gothor
# 02 Feb 2012 - 21:17:08
Citer
71 Posts
Bonsoir !

Si tu veux mettre une image en fond, il faut d'abord utiliser la propriété
background-image
et non pas insérer ton image en HTML.


Ensuite, tu peux jeter un oeil sur ce tutoriel.

Gothor

^
ezra
# 02 Feb 2012 - 22:00:04
Citer
3 Posts
voila c'est exactement ça, merci beaucoup, je vais chercher dans cette direction la.

^
fvsch
# 03 Feb 2012 - 14:36:26
Citer
Administrateur
19899 Posts
Effectivement on utilisera background-image, et background-size:cover. (Voir l'exemple donné par Gothor pour la syntaxe exacte.)

Par contre, background-size n'est pas compatible IE 7-8. J'en envie de dire que tant pis, ça peut se traiter en dégradation gracieuse.

http://fvsch.com 
^