28172 sujets

CSS et mise en forme, CSS3

Background-size: 100% 100% compatible IE8

Bonjour,

Je rame depuis 2 jours pour trouver une solution pour avoir un équivalent du background-size: 100% 100% et que ceci fonctionne également sous IE8...

Je n'y arrive pas et j'ai absolument besoin d'avoir ce background même sous ie8.

J'en viens à me demander si il y a réellement une solution ?

Merci d'avance si vous avez des pistes.
Hello,

Non ceci ne va pas car mon image doit être déformée. C'est bien du 100% que je veux.
J'avais vu cette page mais je ne suis pas arrivé à adapter le code Smiley decu
Admettons que l'image soit de 300 par 100px et qu'elle soit en background d'un div.

Que le div soit de 300px par 100 ou de 2000px par 100 ou de 300px par 100, elle doit être l'image de fond étendu et déformée sans être rogné pour conserver son ratio.

C'est des exemples ici, dans la pratique mon image n'est pas beaucoup déformée.

Je ne sais pas si j'ai été très explicite ?
Modérateur
Bonjour,

As-tu le droit d'ajouter un balise <img> ?

As-tu le droit d'ajouter du javascript ou du jquery ?

Amicalement,
Modérateur
Bonjour,

Si on suppose que tu veuilles que ton background soit 100% de toute ta fenêtre, tu peux essayer ça :


<body>
<div id="page-background">
  <img src="/z/z51/z.jpg" width="100%" height="100%">
</div>
....




html, body {height:100%; margin:0; padding:0;}
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {width:100%;height:100%;position:absolute;z-index:-1;}


A adapter en fonction de tes autres contraintes.

Amicalement,
Modifié par parsimonhi (02 Jan 2015 - 19:43)
Hello,

Non en fait je veux que ce soit 100% largeur et hauteur d'un div particulier, pas de toute la page !

Je me demande si il y a une solution !
salut,
il y a la méthode "native" IE mais contraignante qu'est

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='/chemin/image.jpg', sizingMethod='scale'
         );

Tu pourrais aussi passer par les fichiers "htc" qui émulent ce comportent avec "behavior".
Le plus simple serait aussi de passer par une balise <img> (ou encore plus simple c'est de ne pas se soucier de ie8...).

EDIT: je crois que le chemin est relatif au HTML et non au CSS (à tester).
Modifié par Zelalsan (05 Jan 2015 - 10:17)
Modérateur
Antho21 a écrit :
Hello,

Non en fait je veux que ce soit 100% largeur et hauteur d'un div particulier, pas de toute la page !

Je me demande si il y a une solution !


Le html


<div class="un-div-quelconque">
<div id="page-background">
  <img src="/z/z51/z.jpg" width="100%" height="100%">
</div>
Ici le contenu de la div quelconque
</div>


Le css


#page-background {width:100%;height:100%;position:absolute;z-index:-1;}
.un-div-quelconque {position:relative;}


Éventuellement, tu peux rajouter un commentaire conditionnel autour de la div qui contient l'image (<div id="page-background">) de manière à ce que ce conteneur et l'image qu'il contient ne soient inclus dans la page que pour les vieux ie.

Amicalement,
Modifié par parsimonhi (05 Jan 2015 - 11:26)
Sujet clos
Aller à