28172 sujets

CSS et mise en forme, CSS3

Bonjour , amis Alsaciens ,
je vais court: j'ai une image que je voudrais en fond d'ecran . PC et tablettes , je ne suis pas exigeant , mais ce qui m'embete que selon le PC , ou l'ecran il me manque toujours un morceau , ...

voila le code CSS
html {
margin:0;
padding:0;
background: url('PicSite/Palac01c.jpg') no-repeat fixed center;
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
}
dans head : <link rel="stylesheet" type="text/css" href="Style1.css" media="screen" />

Mon editeur me dit que : les ligne webkit , moz et o .. ne sont pas valables donc il m'envoie ballader ..

... que faire ??
le site : minicabinparis.com

merci a celui qui allumera la lumiere dans mon humble neant ...
Modérateur
Bonjour,

Ne manquerait-il pas la ligne sans préfixe (la plus importante) ?

background-size:cover;


Amicalement,
ben en fait elle existait :
-o-background-size: cover;

je viens d'enlever le surplus pour ne laisser que :

background-size: cover;
et .. malheureusement ....rien de change,
Modérateur
Bonsoir,


Ce que voulais dire parsimonhi c'est que quand on fait des déclarations préfixés il faut finir par la non-préfixée. Exemple :
-webkit-background-size: cover; /* pour anciens Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover;


En ce qui concerne ta question, je ne vois pas de problème d'affichage... pourrais-tu préciser le "il me manque toujours un morceau" ? Smiley sweatdrop
_laurent a écrit :
pourrais-tu préciser le &quot;il me manque toujours un morceau&quot; ? Smiley sweatdrop

Je confirme qu'il faut que tu précise. En effet avec cover si l'écran n'est pas proportionnelle à ton image, celle-ci sera coupée.
Tu ne peux pas avoir une image width:100% et height: 100% qui s'adapte sur tous les écrans sans qu'elle soit "écrasée".
Modifié par benj (18 Dec 2014 - 00:45)
oui vous avez raison , j'ai fait l'expereince ce soir sur 4 types d'ecran avec des resolutions differentes, et il est impossible que l'image soit :
- soit aux dimensions du screen , donc deformee ...
- soit il manque un morceau , en fonction du standart de l'ecran , 16/9e ou 3/4 etc...

donc avec les codes en places , le resultat est quand meme pas trop mal.

En fait , pour exemple , certains sites de VTC , utilisent BG photos et le resultat est pas mal ....

Donc merci a vous ,
pour le comment sur le code, Smiley cligne
pour le retour a la realite technique ,
Modérateur
mmmmm je crois pas que ce soit une limitation technique hein... mais plus une limite physique... la vie de tout les jours quoi... même si la technique évolue on ne pourra jamais changer les dimensions indépendamment en gardant le même ratio hein Smiley biggol

En web (comme pour un cadre photo) l'image est soit déformée, soit rognée, soit il y a du vide sur les coté ou en haut et en bas, soit elle est pile poil de la bonne taille !

"On ne fait pas rentrer une pastèque dans un citron" pour paraphraser mon dev préféré Smiley murf

Bonne soirée !