[silent_driver]

Boah. Ich bin schon ganz dusselig von der ganzen Sucherei in Foren, dem Web usw..
Ich hab da ein (designtechnisch mitunter sehr verpöntes) Web-Design-Problem.

Konkret geht es um eine Titelseite einer Homesite. Diese hab ich in Illustrator gemacht mit der Größe von 1920 Pixel Breite und knapp 1600 Pixel Höhe.

Jetzt weiß ich, dass man einzelne Bilder in einer HTML Seite sehr elegant als zentrierten Hintergrund definieren kann.
Je nach Auflösung des User-Bildschirms wird dieses Bild halt dann ständig-zentriert angezeigt - Alles, was über die User-Auflösung hinaus geht, wird ohne Mäh und Muh abgeschnitten. Genau das, was ich eigentlich will.

Jetzt hab ich aber das Problem, dass dieses Bild als PNG exportiert so knapp 6MB Größe hat...und also auch zu Zeiten von Breitbandinternet zu elend-langen Ladezeiten führen würde (wenn so in die Seite eingebunden).

Was ich jetzt suche, wäre eine Lösung, um dieses Bild (wie gewohnt) per Photoshop in PNG-slices aufzuteilen (Mosaikladen würde ok gehen!) und auf der Seite so als Bildelement zu definieren, dass a.) das ge-slicte Bild, die Tabelle mit dem Bild unabhängig von Auflösung ständig zentriert bleibt und b.) alles "Überstehende" einfach abgeschnitten wird, also keine Scrollbalken und so auftauchen...

Ich hab jetzt schon einiges herumexperimentiert, aber ich bin auf keinen grünen Ast gekommen

Im Versuch hab ich es zwar geschafft, dass kleine Div-Elemente (z.B. 600px breit) zentriert sind und bei Änderung des Browserfenster auch zentriert bleiben, aber mit meinem großen "Tabellenbild" (> als Desktopauflösung) klappt das nicht.
Es bleibt dann einfach stehen und die Zentrierung passt sich nicht der Auflösung an.
(einziger Hoffnungsmoment blieb für mich, dass ich es geschafft habe, horizontale Scrollbalken zu unterdrücken. Aber ohne anpassungsfähiger Zentrierung bleibt das halt nur ein kleiner Lichtblick).

Vielleicht find' ich ja hier Hilfe von jemanden, der da etwas mehr Ahnung von der Substanz hat bzw. eben dieses Problem irgendwie schonmal gelöst hat...

Zur Veranschaulichung hab ich zwei Beispieldokumente hochgeladen:

eine einzelne Datei per CSS als Background ausgegeben und per "top" und "center" immer schön auflösungsunabhängig in der Mitte:

http://www.attnangpuchheim.at/beispielcsshintergrund.html

und hier eine Slice-Beispieltabelle, die genau so in eine Seite eingebunden werden soll, um ein Ergebnis wie beim oberen Beispiel zu haben:

http://www.attnangpuchheim.at/beispieltabelle.html

Bin ein sehr dankbarer Mensch - wenn mir also wer bei "diesem Ding" weiterhelfen kann, bin ich gern bereit Schokolade oder so "beim Postamt auf Reise zu schicken" Wär echt toll!

Tschüß noch und schöne Grüße aus Österreich,
Stefan

[easteregg]

Schon versucht am eigentlichen Problem zu arbeiten, nämlich deiner 6MB Bilddatei?
- Komprimierung mit tinypng.com (nach meiner Erfahrung bester Webdienst dafür weil höchste Einsparung)
- Grafik als progressiv-JPEG in einer niedrigeren Qualität speichern

Falls du echt die schlampige Tabellenlösung willst:
- Tabelle mit 100% Breite und drei Spalten
- nur die Breite der mittleren Spalte fest angeben
- linke Spalte: linker Teil deiner Grafik (Breite: (1920px - Breite mittlere Spalte) / 2), Hintergrundposition top right
- mittlere Spalte: Grafik mit Breite der mittleren Spalte
- rechte Spalte: restliches Bild, selbe Breite wie Bild in linker Spalte, diesmal mit top left als Position.