#Alsacreations Forum RSS Forum RSS 2.0 Forum
* Aller au menu
* Aller au contenu
* Aller à la recherche
Accueil - Alsacreations.com
* Apprendre
* Forum
* Emploi
Suivez les fils RSS
____________________ OK
* Accueil de la section
* S'inscrire
* S'identifier
* Aide
* Recherche
Rechercher dans le sujet :
____________________ ok
Forum
» CSS et mise en forme, CSS3
» étirer une ![]()
sans que celle ci soit déformée
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 ![]()
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.
__________________________________________________________________
Cest ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com
^
Prévenir un modérateur
Répondre au sujet
Aller à [CSS et mise en forme, CSS3___________________]
Suivez-nous sur Twitter
* Réalisation : Alsacreations.fr
* Hébergement : Nikozen
* Mentions légales - Flux RSS
* XHTML Best Effort Valid
* CSS 3 Might Become Valid
" Je voudrais arrondir l'angle de mon " (Maîté)
" As-tu pensé au yoga ? " (Yogi Bear)
Suggérer une citation best-of
* Boutique
* Formations
* Contactez-nous
* À propos
* Plan du site
* Haut de page
Alsacréations est une communauté dédiée à la conception de sites web de
qualité, notamment grâce aux standards W3C, aux feuilles de styles CSS,
aux langages HTML et XHTML, et à l'accessibilité (en savoir plus...)
Alsacreations
http://www.alsacreations.com/
recherche___________ OK