body background skalieren // für jede Seite ein anderes image

**tyler** · 17.05.2010, 23:25

Hallo Leute,

habe ein kleines Anfängerproblemchen...
Ich möchte auf meiner Seite dem body ein image zuweisen das skaliert wird. Wie stelle ich das an OHNE das template fe_page zu ändern? Geht das denn überhaupt?
Ich habe schon ein weile gegoogelt und die Lösungsansätze sind für mein Projekt nicht zufriedenstellend (Ich möchte das bild nicht dem wrapper zuweisen - dem ist das Seitendesign als Grafik zugewiesen, in den templates möchte ich wie gesagt auch keine neue Klasse einfügen wenn es sich vermeiden lässt).

Hat jemand eine Idee?

Vielen Dank schonmal im Vorraus

tyler ***

**schman** · 18.05.2010, 07:49

wash heißt für dich skalieren?
du wirst jeder Seite eine CSS Klasse mitgeben müssen damit du anschließend dem Body die Grafik mitgeben kannst.
Diese Klasse kannst du bequem im Backend vergeben, schau dir das mal http://https://contao.org/projects/t...heSeitenbilder an

**tyler** · 18.05.2010, 13:11

danke erstmal für die schnelle Antwort

das mit der Css Klasse für die einzelnen Seiten funktioniert schonmal ganz gut... Sehr geil.

Mit skalieren meine ich - automatisch an die Bildschirmgröße anpassen. So wie hier: http://ringvemedia.com/ Im body gibt es ja keine width und height in %. Bei den anderen hier im Forum ist dieses Problem meistens mit einem Eingriff in fe_page gelöst worden, aber da muss es doch noch eine bessere, andere Möglichkeit geben.

grüße
tyler ***

**schman** · 18.05.2010, 14:57

Ok skallieren ansich habe ich noch nicht gebraucht es gibt ein jquery plugin mit dem das gehen sollte, schlauer wäre es wenn du hier vielleicht eins auf mootools basis finden könntets. was meint dr. google dazu

**tyler** · 18.05.2010, 15:25

also das plugin sieht schonmal echt genial aus das würde denn Zweck mehr wie gut erfüllen - aber wie kann ich das in typolight einbinden? Die CSS einzubinden ist kein Problem aber um das html zu bearbeiten müsste ich das template doch umschreiben, oder?
Wozu mootools - wenn ich das plugin so reinbekomme ist es doch auch nur ein javascript oder?

***xchs*** · 18.05.2010, 15:33

Zitat von tyler

also das plugin sieht schonmal echt genial aus das würde denn Zweck mehr wie gut erfüllen - aber wie kann ich das in typolight einbinden? Die CSS einzubinden ist kein Problem aber um das html zu bearbeiten müsste ich das template doch umschreiben, oder?
Wozu mootools - wenn ich das plugin so reinbekomme ist es doch auch nur ein javascript oder?

Du kannst das JQuery-Framework auch gemeinsam mit dem MooTools-Framework nutzen, wenn Du ersteres im sogenannten "noConflict"-Modus betreibst. Dadurch kannst Du dann in weiterer Folge jedes beliebige jQ-Plugin auch mit TYPOlight verwenden.

**tyler** · 18.05.2010, 16:03

sry, ich check grade mal gar nichts mehr - ich bin noch neu in der Materie...
Wie geht denn das? Und sag jetzt nicht über das Template..

Gibt es keine einfache css basierte Lösung oder ein plug in aus dem Erweiterungskatalog?

Eine Diashow muss auch nicht zwangsläufig sein - wichtig ist nur dass jede Seite ein anderes Bild erhält.

**schman** · 19.05.2010, 08:35

also für das skalieren braucht es definitiv ein Javascript, du kannst höchstes das Hintergrund mit großen Dimension nehmen (2500 x 2000) oder so und dieses dann eben per CSS einbinden (wie oben erwähnt)
Wenn ein Monitor eine Auflösung von 1680x1050 dann wird das Bild eben beschnitten (auf der Rechten und unteren Seite).

Andernfalls wirst du keien andere alternative haben als eben das jQuery Plugin zu nehmen, das wiederum erfordert einen eingriff ins Template.

**Nils Riel** · 19.05.2010, 09:54

Du brauchst kein Javascript dafür. Das ganze geht mit z-index und einem <img> ganz am Anfang. Das schaut dann in der HTML so z.B. aus:

HTML-Code:

<body>
<div id="background"><img src="background.jpg" alt="Name" /></div>
<div id="wrapper">
.......

Und in der CSS:

PHP-Code:


#background {position:absolute;z-index:1;}

#background img {width:100%;}



#wrapper {position:absolute;height:100%;width:100%;overflow:scroll;z-index:2;}

Das ist jetzt nur der wichtigste Code-Ausschnitt. So hat das Bild immer die volle 100% Breite und es sieht so aus, als ob das Bild immer mit dem Text mitläuft - das tut es aber nicht, weil der Wrapper absolut und fest darüber liegt

**tyler** · 19.05.2010, 16:29

danke für die Tipps.. Ich werde die Idee von schman umsetzen - ohne sich an das template zu wagen stöst man wohl leider doch an Grenzen.. Wird Zeit das CSS3 endlich standard wird.

Vielen Dank