jquery - étire l'image de fond pour remplir le document plutôt que la fenêtre?

J'utilise ce plugin: https://github.com/srobbin/jquery-backstretch pour étirer un arrière-plan dans le bon sens. Donc le problème est que si le contenu du document est assez long pour provoquer une barre de défilement, alors lorsque vous faites défiler, l'image reste au même endroit (ressemble à un arrière-plan stationnaire). Vous pouvez le voir dans sa démo ici: http://srobbin.com/jquery-plugins/jquery-backstretch/ (cette page utilise le plugin, il suffit de faire défiler et de remarquer que l'arrière-plan ne bouge pas).jquery - étire l'image de fond pour remplir le document plutôt que la fenêtre?

Je me demande s'il existe un moyen de changer le plugin pour ne pas utiliser la hauteur de la fenêtre ou quelque chose et plutôt utiliser la hauteur du document? J'ai regardé, mais en vain. Je sais que ce n'est pas une bonne idée dans le cas où le contenu est long, mais c'est fait sur une seule page qui n'a pas beaucoup de contenu du tout. Vraiment les seuls problèmes sont si le navigateur immobilier (sans compter le chrome) est comme moins d'environ 650px de hauteur.

Voici le code du plugin. Assez court et bien écrit de ce que je peux dire: https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

Source

2010-12-15 Matthew

-2

Sans payer ce qui concerne le rapport d'image, je crois que vous pouvez définir bgHeight-$("body").height().

Source

2010-12-16 13:31:23

J'ai déjà eu le même problème, c'était ma solution.

$(window).resize(bg); 
function bg() { 
    var imgWidth = 1088, 
     imgHeight = 858, 
     imgRatio = imgWidth/imgHeight, 
     bgWidth = $(document).width(), 
     bgHeight = bgWidth/imgRatio; 

     $('body').css({backgroundPosition: 'top center'}); 
     if ($(document).width() < imgWidth && $(document).height() < imgHeight && $(document).height() > bgHeight) { 
      $('body').css({backgroundSize: 'auto 100%'}); 
     } else { 
      $('body').css({backgroundSize: '100% auto'}); 
     } 
} 
bg(); 
$('body').css({backgroundRepeat: 'repeat-x'}); 
$('body').css({backgroundImage: 'url("images/bg-state/bg_static2.png")'});

Note: Il ne pas étirer sur IE en raison du code utilise la propriété CSS3 background-size et vous devez définir votre propre largeur et la hauteur de l'image dans le code.

Source

2010-12-20 14:39:06 Codler

Une autre approche avec un contenu défilant et un arrière-plan fixe serait d'utiliser simplement un ou de corriger le <img> sur une couche. Ensuite, vous n'auriez pas besoin de dépendre de jQuery (que je pense être un peu lourd) pour quelque chose qui pourrait être fait sur le navigateur sans elle.

<body background="background.png"> 
    <iframe src="content.html" height="600"/> 
</body>

aussi trouvé une autre façon de le faire avec des couches:

<img src="background.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index:-1;" /> 
<div style="position: static;z-index: 1; "> 
    content 
</div>

Source

2010-12-27 12:40:49

Vous avez 2 positions défini dans le img ?? Fixe et absolu ... ce n'est pas bon! – Warface

bonne prise (style sage), mais techniquement le dernier gagne donc vous pouvez placer toute la propriété de 'position' toute la journée mais sur le rendu seulement le dernier comptera;) –

jquery - étire l'image de fond pour remplir le document plutôt que la fenêtre?

Répondre

Questions connexes