2-teiliges CSS "Wallpaper", das die Größe des Browsers ändert

Question

Mein Designer glaubt, dass dies nicht möglich ist, aber es scheint mir möglich. (Obwohl ich begrenzte CSS Erfahrung habe). Er sagte jedoch auch, dass der Hintergrund nicht behoben werden konnte, und Stackoverflow hat sich in der Vergangenheit als falsch erwiesen; also stelle ich sein Wissen in Frage.

JQuery kann verwendet werden, wenn dies in reinem CSS nicht möglich ist.

Die obere Hälfte wird ein Gradient sein, der voll flexibel ist, um links, rechts, oben, unten ohne viel Verzerrung zu neigen. Die untere Hälfte ist ein Bild, das ideal für die Auflösung 1280 x 1024 ist (da dies die beliebteste Browser-Bildschirmauflösung ist). Abhängig von den Anforderungen wird es skizziert und in der gewünschten Größe skaliert. Lassen Sie immer noch das gesamte Bild sehen.

Das Verhältnis zwischen der oberen Hälfte und der unteren Hälfte ist immer 50% 50% unabhängig von der Browserauflösung.

Ich würde auch gerne, wenn sowohl die oberen und unteren Teile befestigt sind.

In einer perfekten Welt (eine ohne IE), id möchte dies mit CSS3-Verläufen und mehreren Hintergründen in 1 DIV tun. Da IE9 jedoch noch nicht verfügbar ist, denke ich, dass der beste Weg, um es zu erreichen, 2 divs in einem DIV-Container wäre und einen PNG-Hintergrund für das obere div verwenden würde.

Es sollte beachtet werden, ich css3pie.com verwenden werde einige CSS3 für IE6-8 zu ermöglichen (aber ich möchte nicht darauf verlassen, es sei denn, 100% bewiesen)

Ist dies möglich, mit nur CSS? Wie würdest du es machen?

Wenn nicht nur mit CSS möglich, gibt es eine Möglichkeit, wie ich JavaScript/JQuery Hilfe bekommen kann? Ich denke eine Basis von 1280 x 1024 ist nicht die beste Idee, weil es ein seltsames Radio zu haben scheint.

Edit 1

Oh ja, ich habe auch einen WIP: http://meyers.ipalaces.org/extra/

Es sieht gut aus in 1280 x 1024 ... jetzt seine nur die ganze Größe neu bestimmen immer des Top-DIV 50% sein, so Das Bild ist 50%.

Ich möchte immer noch das ganze Wasser gesehen werden, weil ich das Aussehen der Felsen am unteren Rand mag. Ich bin jedoch offen für alternative Ideen, die nicht 100% erreichen, was ich will, aber nahe kommen.

Edit 2

Wie über die obere Steigung als die wahre CSS2 Hintergrund verwenden und dann nur eine <img> am unteren Rand davon setzen, um die Größe? Vielleicht ermöglicht dies die CSS2-Fähigkeit. Ich bin einige Behelfslösung Techniken verweisen hier: A list apart

Edit 3

ich noch für Ergebnisse suchen, die auf IE6 arbeiten und auch dazu führen, Internet Explorer nicht zurückzubleiben. Ich stelle ein Kopfgeld von 50 ein, um mehr Aufmerksamkeit zu bekommen.

Answer 1

Ich habe kam erfolgreich mit 2 Möglichkeiten, dies zu tun:

Methode 1

Click here to view demo

CSS3 Mit background-size ich in der Lage war, die jeweils gesetzt 2 div Elemente auf der Oberseite andere mit min-height: 50% und dann mit background-size: 100% 50% erreichen sie erfolgreich, was ich suche.

Diese Methode war nur ein Beweis des Konzepts, wie IE6-8 background-size nicht unterstützt, verfolgte ich nicht, diese Methode perfekt zu optimieren. So wie es aussieht, vermasselt es derzeit beim Scrollen trotz background-attachment: fixed;. Ich ditched diese CSS3 Methode, um für bessere Methoden Tricks CSS zu suchen ...

---

Methode 2

Click here to view demo

Beispiele Im Anschluss an die ich von A List Apart (Article gefunden | Example1 | Example2). Ich habe Technik Nr. 2 aus Beispiel 1 verwendet und konnte mit CSS2 emulieren, was ich tun wollte. (Ich bin nicht 100% sicher, wie oder warum das funktioniert, aber es funktioniert)

Weil ich auch CSS3PIE verwenden werde IE6-8 CSS3 die Möglichkeit zu geben linear gradients, border-radius und box-shadow zu tun; Ich entschied mich für einen linearen Farbverlauf anstelle eines Bildes für den oberen Hintergrund.

Probleme

• CSS2 Methode von Technik # 2, Beispiel 1 nicht mit IE6 korrekt funktionieren
• Erzeugt eine übermäßige Verzögerung in allen gängigen Internet Explorers

Answer 2

Wenn Sie behalten möchten der Horizont des Wassers bei 50% auf Ihrem Bildschirm, würde ich eine einfachere Methode vorschlagen;

Erstellen Sie ein Bild (wahrscheinlich etwa 1280 breit) in Photoshop von Wasser auf der Unterseite und Farbverlauf oben. Blenden Sie den oberen Farbverlauf in ein kräftiges hellblaues Blau um (z. B. # 68b). Blenden Sie die linke, rechte und untere Seite des Bildes in die gleiche Farbe ein (# 68b).

Legen Sie den Hintergrund Ihrer Seite wie folgt fest;

html { 
background: #68b url(waterimage.png) center center no-repeat; 
} 

In Ihrem Fall, werden Sie wahrscheinlich wollen den Hintergrund #wdth-100 statt html bewerben, aber es hängt alles davon ab, welches Element Sie wollen auf Ihrem Hintergrund setzen.

Alles fertig. Lassen Sie mich wissen, ob das für Sie funktioniert.

Answer 3

Ich habe keinen Link zu Ihrem oberen Bild, also habe ich das gleiche Bild für oben und unten verwendet. Sie sollten wahrscheinlich eine CSS-Lösung für normale Browser und das JS für IE verwenden.

<script type='text/javascript'> 

$(document).ready(function() { 
    wh=$(window).height(); 
    ww=$(window).width(); 
    if(wh%2) { 
     h1=Math.round(wh/2); 
     h2=Math.round(wh/2)-1; 
    } else { 
     h1=h2=wh/2; 
    } 
    img1=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img1'}) 
      .css({'width':ww,'height':h1,'top':'0','left':'0','position':'absolute','z-index':'-100'}); 
    img2=$("<IMG/>",{'src':'http://meyers.ipalaces.org/images/bottom-bg.jpg','id':'img2'}) 
      .css({'width':ww,'height':h2,'top':h1,'left':'0','position':'absolute','z-index':'-100'}); 


    $(document.body).append(img1); 
    $(document.body).append(img2); 
}); 
$(window).resize(function() { 
    wh=$(window).height(); 
    ww=$(window).width(); 
    if(wh%2) { 
     h1=Math.round(wh/2); 
     h2=Math.round(wh/2)-1; 
    } else { 
     h1=h2=wh/2; 
    } 
    $('#img1').css({'width':ww,'height':h1,'top':'0','left':'0'}); 
    $('#img2').css({'width':ww,'height':h2,'top':h1,'left':'0'}); 
}); 
</script> 

Answer 4

Die pragmatische Antwort scheint es mit mehreren divs mit ihrem eigenen Hintergrund zu sein, zu tun, von denen alle absolut und hinter alles positioniert werden würde sonst z-Index.

Ich weiß, das ist nicht die saubere Markup-Lösung mit einem einzigen Div mit einigen magischen CSS, aber das ist ein kniffliges Problem in reinem CSS in jedem Browser, und fast unmöglich, wenn Sie IE6 unterstützen müssen. Eine noch pragmatischere Antwort wäre zu sagen "Ich werde IE6 so weit ich kann unterstützen, aber wenn es meinen schönen Hintergrundeffekt nicht unterstützen kann, dann ist das nur ein Pech für jeden, der es noch benutzt".

Answer 5

Verwenden Sie dazu raphaeljs. Erstellen Sie ein Hintergrund-DIV, das zu einer Zeichenfläche wird, zeichnen Sie eine rect auf 50% der Seitenhöhe (wenn Sie jQuery verwenden, verwenden Sie $(window).resize(), um eine Fenstergröße zu überwachen und $(window).height(), um die 50% in Pixel zu erhalten).

Sie in den raphealjs füllen kann rect mit specifing ist es wie fill: "90-#000000-#ffffff"

Was den Bildwert etwas füllen: Legen Sie das Bild raphealjs' mit image OR einbetten es nur mit Hilfe von HTML und aktualisieren es ist höhen Skala jquery wie oben erwähnt.

Ich habe so etwas vor kurzem mit etwa 10 Zeilen Code gemacht.

Auch: Ändern Sie Ihre water.png, es ist etwa 275kb, wo als nächste Datei auf Ihrer Seite (der CSS) ist wie 1.5kb.

Answer 6

Es kann nur mit CSS getan werden. Keine PIEs notwendig. Nur ein IE6-Bug und einige Filtermagie.

Demo: http://www.bundyo.org/test/FPB.html