Bild im Hintergrund an Browser anpassen

[Dora]

Ich habe ein Bild im Hintergrund. Wie kann man das machen, dass das Bild sich an die Größe des Bildschirmes anpasst?

Ich habe versucht mit Breite und Höhe 100% das macht aber kein Unterschied.

Und mit Repeat sieht das nichts aus.

Muss ich vielleicht etwas an der Bildgröße ändern?

[sceadara]

Hy, soweit ich weis ist das garnicht möglich.
Aber ich kann mir auch nicht vorstellen dass das sonderlich effektiv ist. Das Bild wird doch dann nur grausam verzerrt und verpixelt. Mit einer Vectorgrafik wäre das möglich da die sich hoch skalieren lässt, aber wie gesagt ein normales Bild wird nicht möglich sein. Bin mir aber auch nicht 100%tig sicher.
Grüße Sceadara

Sent from my Hero using Tapatalk

[aaronl]

Wenn ich dich richtig verstanden habe willst du dass das Bild immer den gesamten Viewport ausfüllt, dabei aber nicht verzerrt wird. Auf die Kosten dass die längere Seite abgeschnitten wird.

Entweder machst du das per JS oder ein Beispiel wie man so etwas nur mit kreativem Umgang mit HTML und CSS realisiert ist GOTOCHINA. Allerdings funktioniert diese Methode nicht in allen Browsern gleich gut. Opera macht zB etwas Probleme.

EDIT:
Etwas das ich auch schon gesehen habe war ein Flash File im Hintergrund dass das Hintergrundbild geladen und an den Viewport angepasst hat.

[Dora]

Das bei GOTOCHINA sieht gut aus. Aber ich habe nicht ganz verstanden wie das in Typolight umgesetzt werden kann.

Ich bin noch Anfänger.

[aaronl]

Das bei GOTOCHINA sieht gut aus. Aber ich habe nicht ganz verstanden wie das in Typolight umgesetzt werden kann.

Ich bin noch Anfänger.

Dafür musst du dir das CSS und HTML der Seite anschauen, analysieren und das Template in TL abändern. Allerdings würde ich andere Methoden verwenden. GOTOCHINA sieht im Opera nicht perfekt aus, und ich habe sie auch noch mit Iron (Webkit) und dem Android Browser (auch webkit) angesehn und dort funktioniert es gar nicht. In den anderen Webkit basierten Browern wie Chrome und Safari dürfte es gleich sein.

Ich würde eine Javascript oder Flash Lösung verwenden.

[Dora]

Ich habe eine Möglichkeit gefunden unter:

http://www.drweb.de/magazin/100-hint...ld-im-browser/

Wie kann ich das in Typolight umsetzen?

[aaronl]

Mit einer Anpassung des Templates fe_page.tpl geht das sicher. Die Frage ist nur ob dir das gut genug ist, denn das Bild passt sich genau an das Browserfenster an. Skaliert nicht und sieht je nachdem wie man die Fenstergröße des Browsers ändert sehr bescheiden aus weil es das Bild voll verzerrt.

Ich kann dir jetzt leider auch keine andere fertige Lösung anbieten die bei allen Desktop Browsern funktioniert. Bin zwar selber auf der Suche nach einer, aber habe nicht den Druck sofort etwas haben zu müssen, und momentan zu viel anderes zu tun als dass ich mich mal hinsetzen könnte und nach einer fertigen Lösung zu suchen oder selbst etwas zu entwickeln.

[Dora]

ich dachte wenn man nur bei breite 100% eingibt dann müsste sich das doch skalieren ohne zu verzerren oder? Aber ich habe das noch nicht ausprobiert.

Was und wie muss ich das template ändern? Sorry für die dumme Frage aber ich kenne mich noch nicht so sonderlich gut aus mit css und typolight.

Wäre froh wenn du mir da einen Tipp geben könntest.

[whitestone]

ich weiß, ich bin spät dran, bin aber jetzt erst zufällig darüber gestolpert, weil betreffend hintergrundbild im forum gesucht habe.

wenn du noch eine info brauchst, schau dir mal meine seiten an, ob es das ist, was du suchst:

http://www.wiegert.at
http://www.hydro-ing.at

sonnengrüße

andi

[ajdan]

Hallo Andi,

ich bin auch gerade über deine Antwort gestolpert... da ich auch noch nicht so glücklich bin mit meiner Hintergrundlösung....
Ich habe mir auch deine Links angeschaut,
die Seite http://www.wiegert.at gefällt mir richtig gut und ist das was ich suche... allerdings habe ich noch nicht so ganz verstanden wie du das gemacht hast...
Du hast das Bild in ein Div #background gelegt und dann mit javascript den wechsel des Bildes pro Seiten geändert?
Wo muss ich das Script für den Wechsel einfügen... auf jeder Seite separat oder nur einmal?
Wo finde ich das Script für den Wechsel?

Vielelicht kannst du mir ja weiterhelfen...
danke
nadja

[tblumrich]

Hallo.

Ich habe für 2-3 Contao Projekte schon den bgStretcher benutzt. Wenn du bei einer solchen Funktionalität nicht abgeneigt bist JS dafür zu nutzen und zusätzlich mit einer jQuery Einbindung (z.B. mit der Erweiterung http://www.contao.org/erweiterungsli...ery.20.de.html) leben kannst... ich finde das funktioniert ganz gut, vor allem ohne Anpassungen am Seitentemplate. Und im Gegensatz zu einigen der geposteten Beispiele wird proportional angepasst.

Gruß
Thomas

[Goody]

ich weiß, ich bin spät dran, bin aber jetzt erst zufällig darüber gestolpert, weil betreffend hintergrundbild im forum gesucht habe.

wenn du noch eine info brauchst, schau dir mal meine seiten an, ob es das ist, was du suchst:

http://www.wiegert.at
http://www.hydro-ing.at

sonnengrüße

andi

Hallo Whitestone,
deine Seite www.hydro-ing.at gefällt mir außerordentlich gut. Sehr gelungen!
Wie hast Du das mit den wechselnden Hintergrundbildern gemacht? Und wie geht das mit dem "Slider" auf der Startseite? Also das Bild und Text sliden? Ist das eine Erweiterung? Über eine Rückmeldung würde ich mich freuen.

Gruß
Goody