La Communauté Webmaster  forum rss


  Forum-webmaster
  Général
  Un projet de site internet ? (Modérateurs: Lilian, Shain, Wolf18)
  image de fond proportionnelle a la taille de l'écran		 « Précédent Suivant »
Pages: [1] 2 Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: image de fond proportionnelle a la taille de l'écran  (Lu 12241 fois)
image de fond proportionnelle a la taille de l'écran
« sur: le 03-10-2013 a 00:11:08 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

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 !

Rapporter au modérateur  

Re:image de fond proportionnelle a la taille de l'écran
« Répondre #1 sur: le 03-10-2013 a 11:15:27 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

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.
Rapporter au modérateur  
Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #2 sur: le 03-10-2013 a 17:25:10 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

Merci beaucoup pour ta réponse, je vais essayer cette technique!

Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #3 sur: le 04-10-2013 a 00:37:15 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

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>
Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #4 sur: le 04-10-2013 a 12:05:21 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

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>
Rapporter au modérateur  
Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #5 sur: le 04-10-2013 a 20:08:49 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

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!
Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #6 sur: le 05-10-2013 a 01:25:58 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

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 

Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #7 sur: le 05-10-2013 a 12:49:29 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

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 ?
Rapporter au modérateur  
Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #8 sur: le 05-10-2013 a 13:22:54 »
Steeve
Membre récent
*

Hors-Ligne

Messages: 19





Voir le Profil    E-Mail
Répondre avec citation

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;
}
Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #9 sur: le 05-10-2013 a 13:25:04 »
Steeve
Membre récent
*

Hors-Ligne

Messages: 19





Voir le Profil    E-Mail
Répondre avec citation

Oups, j'avais pas bien lu la question 
Tu peux a la place passer par les requête de médias.
Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #10 sur: le 06-10-2013 a 19:49:43 »
edspark
Membre récent
*

Hors-Ligne

Messages: 7





Voir le Profil    E-Mail
Répondre avec citation

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.
Rapporter au modérateur  
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #11 sur: le 07-10-2013 a 13:41:55 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

Ok tant mieux =).

Bon courage
Rapporter au modérateur  
Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #12 sur: le 13-10-2013 a 18:46:13 »
data-jack
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 7





Voir le Profil    WWW    E-Mail
Répondre avec citation

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.
Rapporter au modérateur  
Création de site internet
Web developer | Web designer
SIRET: 53761166700016
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #13 sur: le 13-10-2013 a 22:04:30 »
Franck K
Habitué
***

Hors-Ligne

Sexe: Male
Messages: 319



Développeur / Intégrateur Freelance

Voir le Profil    WWW    E-Mail
Répondre avec citation

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.
« Dernière Édition: le 13-10-2013 a 22:06:02 par Franck K » Rapporter au modérateur  
Franck Kosellek - Développeur web en freelance depuis 2009 -
Expert E-commerce / Prestashop. Nephila Studio - PrestaStudio
SIRET 798 506 366 00011
Re:image de fond proportionnelle a la taille de l'écran
« Répondre #14 sur: le 14-10-2013 a 07:47:11 »
data-jack
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 7





Voir le Profil    WWW    E-Mail
Répondre avec citation

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.
« Dernière Édition: le 14-10-2013 a 07:48:54 par data-jack » Rapporter au modérateur  
Création de site internet
Web developer | Web designer
SIRET: 53761166700016
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] 2 Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 
Logo du forum du webmaster

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg