Webseite mit fullscreen Hintergrund und transparenten Content Elementen

Druckbare Version

11.03.2012, 13:34
gzah

Webseite mit fullscreen Hintergrund und transparenten Content Elementen

Hallo,

Ich möchte gerne eine einfache Webseite erstellen mit einem grossen Hintergrundbild oder einem Bild pro Seite. Alle Elemente wie Header, Container, Footer usw. sollen leicht transparent sein so dass der Hintergrund leicht durchschimmert.

1) In Photoshop lässt sich so etwas sehr schön und schnell gestalten. Aber wie binde ich das in Contao ein? Das durchschimmern der Slices, also der Bildschnipsel wird ja nur gerade für eine Auflösung korrekt dargestellt weil die Slices nur im Photoshop zu 70% transparent sind. Nach dem export sind es einfach nur GIF's und keine "intelligenten" Bilder die jeweils den Hintergrund zu 70% durchschimmern lassen.

2) Oder würde es funktionieren wenn ich nur das Hintergrundbild per CSS in #top einbinde und in Contao bei Header, Container, Footer jeweils einen z.B. 70% transparenten Hintergrund per CSS definieren? Dann könnte ich die Gestaltung nur per CSS definieren.

3) Ich möchte die Gestaltung möglichst im Photoshop oder Fireworks machen und mit den tollen Modulen von Contao die Artikel, Kalender, Suchformular, Googlemaps usw. einbinden. Geht das auf einfache Art und Weise. Wenn ja, wie?

4) Die Navigation ist ein weiteres Thema. In Contao per Modul super einfach. Wie macht man das am einfachsten mit den Slices in Contao? Muss ich das alles selber mit html und css machen? Oder kann ich das Navigationsmodul mit meinen Slices füttern?

5) hier habe ich etwas gefunden das vielleicht hilfreich sein könnte. Da ich aber nicht ganz durchblicke und mich mehr auf die Gestaltung konzentrieren möchte weis ich nicht ob das meine Probleme lösen könnte:
http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer

Vielen, vielen Dank für eure Unterstützung ! :D

gzah
11.03.2012, 14:49
lucina

Das Konzept des Sclicens ist mir immer ein wenig fremd geblieben, zum Worflow in Photoshop kann ich Dir daher nicht viel sagen (ausser, dass *.gif) da für mich als nicht geeignet erscheint, wenn irgendwas serverseitig skaliert werden soll).

Bei einem Full-Background kommt es darauf an, ein Hintergrundbild in den <body> der Seite zu bekommen (oder, besser, in ein Element, dass in der Hierarchie zwischen <body> und <#wrapper> liegt. Man kann das sehr schön hinbekommen, indem man mit einem 'eigenen Layoutbereich' arbeitet, den man dann mittels einer Templateanpassung vor dem #wrapper ausgibt und den Rest der Seite dann quasi drüberlegt. Die von Dir erwähnte Extension - die ich mir jetzt nicht genau daraufhin angeschaut habe - macht so etwas in der Art.

Transparenzen als semitransparente Hintergrundbilder anzulegen ist IMHO nicht mehr so ganz State of the Art, seitdem in CSS3 ja die Unterstützung für Transparenz enthalten ist. Der IE7 verdaut das nicht wirklich, also sollte der ein transparentes Hintergrundbild bekommen (mittels Conditional Comment).

Mittels CSS3 funktioniert das alles, indem Du den #Elementen, die eine Trasparenz haben sollen, einfach die entsprechenden CSS-regeln zuweist.

Navigation: Ich glaube, Du solltest mal nach CSS-Sprites googeln. In Verbindung mit Transitions ein mächtiges Werkzeug.

Carolina.
11.03.2012, 15:39
aadursun

Kannst du mal ein Screenshot von deinem Vorhaben posten?
11.03.2012, 15:44
rednex

Zitat:

Zitat von aadursun

Kannst du mal ein Screenshot von deinem Vorhaben posten?

ich denke mal, dass er sowas meint: http://fast-geheim.de
11.03.2012, 18:29
scribble

Bild einfach als Modul im Header einbinden und mit CSS stylen. Die neueren Browser (seit 2008) können problemlos Bilder automatisch und sauber runterskalieren, d.h. du brauchst nur ein Bild z.B. 1600 x 1200px (oder entsprechend grösser) und machst dann die width: 100%. In der Regel reicht das, ganz alle Monitore kann man eh nie bedienen (z.B. 42" Apple Display etc....)

bsp hier: http://bit.ly/wBNygk

bei bild pro seite, bild per pageimage einbinden (http://www.contao.org/de/extension-l...020029.de.html) oder im Template einen Artikel für die Kopfzeile definieren.

css-code:

.background_image{
width:100%;
left:0;
top:0;
position:absolute;
min-width:fpx;
z-index:-1;
}
11.03.2012, 23:21
gzah

Das Projekt soll in etwa die Effekte haben wie beim link von rednex.

http://fast-geheim.de

habe noch ein bisschen weiter geübt. Mittlerweile habe ich (endlich!) bemerkt dass die Bilder nur dann transparent sind wenn man sie im Photoshop als png24 speichert. Da man bei allen Formaten den Haken "transparent" setzen kann hat mich das ein wenig verwirrt.

Die Hyperlink hover Navigation mache ich wohl wieder mit dieser extension. Ist einfach, übersichtlich und funktionierte bis Contao 2.10 einwandfrei. Hoffentlich funktionierts auch mit 2.11

http://www.contao.org/de/extension-l...010009.de.html

Falls es nicht funktioniert dann ist der Tip von Carolina, css-sprites sicher eine gute Wahl.

Das Hintergrundbild lasse ich skalieren wie scribble es vorschlägt.

Vielen Dank für die hilfreichen Tipps ! :D