Titre: image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 03-10-2013 a 00:11:08
Bonjour à tous,
J'ai conçu mon site web avec web creator pro 6.
J'aimerai placé une image de fond qui soit affichée proportionnellement en fonction de la taille de l'écran. (15 pouces à 27 pouces par exemple).
Si vous avez une technique concernant ma requête.
Merci par avance ! ;) |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 03-10-2013 a 11:15:27
Salut.
Tu peux, en JS, calculer selon la largeur de la fenêtre la largeur que ton fond devra avoir. Je parle bien entendu d'un fond via une image en fixed, pas en CSS.
Pour me faciliter la vie, j'utilise jQuery.
// Calcul de la taille de la fenêtre
windowWidth = jQuery(window).width();
windowHeight = jQuery(window).height();
// 1600/1200 est le ratio en dur du fond. A changer, ou mettre en dynamique.
// Pour conserver le ratio du fond on part du principe où il sera tronqué, forcément. La question maintenant est de savoir si l'on doit tronquer en hauteur ou en largeur.
if ((1600/1200) < (windowWidth/windowHeight)) {
bgWidth = windowWidth+"px";
bgHeight = Math.round(windowWidth/1600*1200)+"px";
}
else {
bgWidth = Math.round(windowHeight/1200*1600)+"px";
bgHeight = windowHeight+"px";
}
// On donne à l'image de fond fixe ses dimensions.
jQuery(".background").css({"width" : bgWidth+"px", "height" : bgHeight+"px"});
Alors tu peux l'améliorer en le mettant dans un event resize, tu peux faire en sorte de centrer pour ne pas avoir qu'un côté tronqué, etc etc... Mais tu as déjà l'idée principale =).
Bon courage. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 03-10-2013 a 17:25:10
| Merci beaucoup pour ta réponse, je vais essayer cette technique! :) |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 04-10-2013 a 00:37:15
bonjour, j'ai trouver ceci : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
j'aimerai prendre la méthode jquery.
mais je ne sais pas ou placer le code html sur ma page entre body et body !!
pouvez vous m'aider ?? merci d'avance ! ci joint ma page :
<!doctype html>
<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="imagetoolbar" content="false">
<meta name="generator" content="LMSOFT Web Creator Pro, Version:6.0.0.4">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<link href="./lmwcglobal.css" rel="stylesheet" type="text/css">
<link href="acceuil.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="./jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./jquery/jquery-ui-1.8.11.custom.min.js"></script>
<link rel="stylesheet" href="./jquery/themes/base/jquery.ui.all.css" type="text/css" media="all" />
<script type="text/javascript" src="./jquery/LMCenterInWindow.js"></script>
<script type="text/javascript" src="./lmpres90.js"></script><noscript></noscript>
</head>
<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px;" onresize=LMGlobalPosPage();>
<DIV class="cLinkHidden">
[<a href="http://www.lmsoft.com/fr" title="web designer">creation site web</a>]
[<a href="http://www.webcreator-fr.com" title="logiciel creation site">creation site web</a>]
[<a href="http://www.lmsoft.com/fr/webcreatorpro.html" title="conception site web">creer site internet</a>]
[<a href="./acceuil.html" title="Accueil">Accueil</a>]<br>
[<a href="./design.html" title="design">design</a>]<br>
[<a href="./logotypes.html" title="logotypes">logotypes</a>]<br>
[<a href="./stikers.html" title="stikers">stikers</a>]<br>
[<a href="./artwork.html" title="artwork">artwork</a>]<br>
[<a href="./illustrations.html" title="illustrations">illustrations</a>]<br>
[<a href="./prestations.html" title="prestations">prestations</a>]<br>
[<a href="./contact.html" title="contact">contact</a>]<br>
[<a href="https://www.facebook.com/pages/Edspark-cr%C3%A9ation-graphiste-illustrateur-freelance/148923311985412" title=""></a>]<br>
[<a href="https://twitter.com/edscrea" title=""></a>]<br>
</DIV>
<div id='Page'>
<div id='Box1'>
<div id='Line2'></div>
<div id='Text2'>
<p style="line-height:0;text-align:left"><font face="Trebuchet MS" color="#808080"><span style="font-size:8pt;line-height:12px;"><b><i>© Edspark création </i></b></span></font><font face="Trebuchet MS" color="#c0c0c0"><span style="font-size:8pt;line-height:12px;"><i>(objet graphique non identifié) </i></span></font><font face="Trebuchet MS" color="#808080"><span style="font-size:8pt;line-height:12px;"><b><i>Pascal Cornée /n°siret 50455168000011/2013</i></b></span></font></p>
</div>
</div>
<div id='But1' class='Up'><p></p><div id='lBut1Up'>Home</div></div>
<div id='But2' class='Up'><p></p><div id='lBut2Up'>Design graphique</div></div>
<div id='But3' class='Up'><p></p><div id='lBut3Up'>Logotypes</div></div>
<div id='But4' class='Up'><p></p><div id='lBut4Up'>Stickers</div></div>
<div id='But5' class='Up'><p></p><div id='lBut5Up'>Artworks</div></div>
<div id='But6' class='Up'><p></p><div id='lBut6Up'>Illustrations</div></div>
<div id='But7' class='Up'><p></p><div id='lBut7Up'>Prestations</div></div>
<div id='But8' class='Up'><p></p><div id='lBut8Up'>Contact</div></div>
<div id='Line1'></div>
<div id='Img1'>
<img id='Img1Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img10'>
<img id='Img10Inner' src='./images/logsansbulle.png' alt="" />
</div>
<div id='Line3'></div>
<div id='Img2'>
<img id='Img2Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img3'>
<img id='Img3Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img4'>
<img id='Img4Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img5'>
<img id='Img5Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img6'>
<img id='Img6Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Img7'>
<img id='Img7Inner' src='./images/tiret-menu_1.png' alt="" />
</div>
<div id='Flash1'>
<OBJECT ID='Flash1Embed'
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
CODEBASE="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
LEFT=0
TOP=0
WIDTH=703
HEIGHT=362
standby="Loading FLASH Player components...">
<PARAM NAME="SRC" value="http://www.edsparkcreation.com/new site/anim/anim.swf">
<PARAM NAME="PLAY" value="true">
<PARAM NAME="LOOP" value="true">
<PARAM NAME="MENU" value="false">
<PARAM NAME="QUALITY" value="High">
<PARAM NAME="SCALE" value="ShowAll">
<PARAM NAME="WMODE" value="Transparent">
<Embed type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/"
src="http://www.edsparkcreation.com/new site/anim/anim.swf"
Name='Flash1Embed'
LEFT=0
TOP=0
WIDTH=703
HEIGHT=362
QUALITY=High
SCALE=ShowAll
WMODE=Transparent
PLAY=True
LOOP=True
MENU=False >
</embed>
</OBJECT>
</div>
<div id='Img9'>
<img id='Img9Inner' src='./images/facebook.png' alt="" />
</div>
<div id='Img8'>
<img id='Img8Inner' src='./images/twitter.png' alt="" />
</div>
<script type="text/javascript" src="./acceuil.js"></script>
<noscript></noscript>
</div>
</body>
</html>
|
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 04-10-2013 a 12:05:21
L'image doit se trouver au tout début du body "
[...]
<body style="margin-Left:0px;margin-Top:0px;margin-Bottom:0px;margin-Right:0px;" onresize=LMGlobalPosPage();>
<img src="image/bg.jpg" class="superbg" />
<DIV class="cLinkHidden">
[...]
Tu ajoutes le CSS dans un fichier de style, et tu appelles, après l'appel jQuery, le fichier de redimensionnement : <script src="script/background.js" type="text/javascript"></script>
|
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 04-10-2013 a 20:08:49
| Ok, je vais parvenir ta réponse à mon pote qui s'occupe de la partie programmation du site, pour ma part je m'occupe du look de mon site web. Merci encore pour ta réactivité et tes conseils! |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 05-10-2013 a 01:25:58
bonjour,
j'ai déjà tester à cette endroit ! et donc le fond s'affiche mais le problème est que les autre éléments du site s'affiche à la suite de celui ci et non pas devant celui-ci !
vois tu un autre emplacement ou une ligne de code supplémentaire ? pour régler le problème ?
Merci d'avance
cordialement |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 05-10-2013 a 12:49:29
Cela signifie que ton image n'est pas en position:fixed, vérifie les propriétés css.
Le site est il accessible en ligne ? |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Steeve le le 05-10-2013 a 13:22:54
Salut,
Tu as aussi cette solution qui me semble plus simple pour toi:
Code:
body {
margin:0;
padding:0;
background: url(image/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover;
}
|
|
|
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Steeve le le 05-10-2013 a 13:25:04
Oups, j'avais pas bien lu la question ;D
Tu peux a la place passer par les requête de médias. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: edspark le le 06-10-2013 a 19:49:43
ok, a priori pour l'image de fond proportionnelle cela fonctionne, il reste des petites choses à régler comme l'affichage du diaporama qui n'est pas très stable ( effet de zoom), détails graphiques et référencement,
Pour le moment le site n'est pas en ligne, le mettrai le lien une fois le site terminé.
Merci encore pour votre aide. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 07-10-2013 a 13:41:55
Ok tant mieux =).
Bon courage |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: data-jack le le 13-10-2013 a 18:46:13
Sinon, on peut oublier les codes JS à rallonge qui sont anti performance et faire 3 lignes de CSS pour répondre à la question.
background-image: url('ton-image.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
background-size: 100%!important;
Le plus simple, le mieux. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 13-10-2013 a 22:04:30
Salut Data-jack. Tu me sembles bien sûr de toi avec ton css. Il est certain qu'aujourd'hui le style d'une page web doit se faire le plus possible en css, nous le savons tous, rien d'incroyable ici.
Seulement l'intérêt du JS ici est d'avoir un fond propre quelque soit la taille de l'écran et la taille du fond.
Avec ton code css si le fond a un ratio large en paysage, sur un écran moins large, ou en portrait, le fond ne prendra pas toute la page et laissera un zone blanche. Tu ne peux en effet pas calculer en CSS le rapport entre ratio de l'image et ratio de l'écran. C'est plutôt moche.
Et en terme de perf, à partir du moment où tu te permet d'inclure une lib jQuery, tu n'économise pas 3 lignes de code JS pour un résultat bien moins flexible en CSS. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: data-jack le le 14-10-2013 a 07:47:11
Un peu de recherche pour adapter le css ne fait jamais de mal ensuite. Les media query par exemple... ;)
Une lib JQuery, c'est +1 requête et +120ko à DL. Si on peut l'éviter, vaut mieux essayer. Sinon, on fait avec mais ça devient vite lourd et on perd rapidement des millisecoondes en chargement de page, surtout avec toutes les lib jQuery. Perso j'essaie au maximum d'éviter de les implémenter. |
Titre: Re:image de fond proportionnelle a la taille de l'écran
Posté par: Franck K le le 14-10-2013 a 11:01:52
C'est vrai qu'avec media query tu peux récupérer le ratio de l'écran. Tu ne peux cependant pas calculer celui de l'image dynamiquement.
Si vraiment tu ne veux pas importer jQuery car tu n'as aucun besoin de cette lib, dans ce cas la solution serait de calculer le ratio des images en php, puis d'envoyer les dimensions au client qui l'utilisera en css.
C'est une alternative intéressante.
Quant à la lib jQuery tu peux avoir raison, si vraiment on a aucun besoin en dev JS autre que ça. En effet ça revient à un import inutile. Dans mon cas je pars toujours sur des besoins particuliers JS qui justifient toujours l'implémentation de la lib, et contrairement à la lib UI, la jQuery de base est relativement légère. Mais c'est vrai que la question peut se poser au cas par cas ! |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|