jquery - Hintergrundbild ausdehnen, um Dokument und nicht Fenster zu füllen?

Ich verwende dieses Plugin: https://github.com/srobbin/jquery-backstretch, um einen Hintergrund auf eine gute Weise zu strecken.jquery - Hintergrundbild ausdehnen, um Dokument und nicht Fenster zu füllen?

So ist das Problem, wenn der Inhalt des Dokuments lang genug ist, um eine Bildlaufleiste zu verursachen, dann wenn Sie scrollen, bleibt das Bild an der gleichen Stelle (sieht nur aus wie ein stationärer Hintergrund). Sie können es in seiner Demo hier sehen: http://srobbin.com/jquery-plugins/jquery-backstretch/ (diese Seite verwendet das Plugin. Scrollen Sie einfach und beachten Sie, dass der Hintergrund sich nicht bewegt).

Ich frage mich, ob es eine Möglichkeit gibt, das Plugin zu ändern, um nicht die Fensterhöhe oder etwas zu verwenden und stattdessen die Dokumenthöhe zu verwenden? Ich habe gesucht, aber ohne Erfolg. Ich weiß, das ist keine gute Idee, wenn der Inhalt lang ist, aber es ist nur auf einer einzelnen Seite, die nicht viel Inhalt hat. Wirklich die einzigen Probleme sind, wenn die Immobilien des Browsers (das Chrom nicht mitgerechnet) weniger als ungefähr 650px Höhe ist.

Hier ist der Plugin-Code. Ziemlich kurz und gut geschrieben von dem, was ich sagen kann: https://github.com/srobbin/jquery-backstretch/raw/master/jquery.backstretch.js

Quelle

2010-12-15 Matthew

-2

ohne dafür zu bezahlen Bezug auf das Bildverhältnis, ich glaube, Sie bgHeight-$("body").height() einstellen könnten.

Quelle

2010-12-16 13:31:23

Ich hatte einmal das gleiche Problem, das war meine Lösung.

$(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")'});

Hinweis: Es ist nicht auf IE strecken kann aufgrund des Code verwendet die css3 Eigenschaft background-Größe und Sie müssen Ihre eigene Breite und Höhe des Bildes im Code setzen.

Quelle

2010-12-20 14:39:06 Codler

Ein anderer Ansatz mit scrollbaren Inhalten und einem festen Hintergrund wäre, einfach eine zu verwenden oder die auf einer Ebene zu fixieren. Dann müssten Sie nicht auf jQuery angewiesen sein (was ich für etwas schwer halte) für etwas, das ohne den Browser ausgeführt werden könnte.

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

gefunden Auch eine andere Art und Weise mit Schichten zu tun:

<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>

Quelle

2010-12-27 12:40:49

Sie haben 2 Positionen in der img gesetzt ?? Fest und absolut ... das ist nicht gut! – Warface

guter Fang (style weise), aber technisch gewinnt man den letzten, so dass man den ganzen Tag lang alle 'position'-Eigenschaften setzen kann, aber beim Rendern wird nur der letzte zählen;) –

jquery - Hintergrundbild ausdehnen, um Dokument und nicht Fenster zu füllen?

Antwort

Verwandte Themen