großes hintergrundbild

[urban-a]

hello,

eine frage, es wird ja immer mehr zu mode, dass man als gestaltungselement fotos als hintergrundbilder einsetzt.

ich würde das ebenfalls gerne mal machen und das foto soll immer den kompletten hintergrund ausfüllen aber wie mach ich das.

normal mit css body {background-image:url(etc...) } haut das nicht so hin, da es mit fixed ja abgeschnitten wird, wenn die auflösung kleiner als das bild ist.

folgende lösungen habe ich mir überlegt:
denkansatz 1: mit js die auflösung auslesen und entsprechendes bg-bild laden
Problem: dann weiß ich, der user hat zb 1024 * 768, bringt aber nichts, da das ja nicht die sichtbare größe im browser ist

denkansatz 2: die innerwidth bzw. innerheight auslesen
Problem: zb bei mir ist die innerheigt 1004 px ein proportionales bild (ausgehend von einem 1600 * 1200 px gr. bild) hätte also die abmessungen 1004 * 753 px
meine innerheigt und innerwidht ist aber 1004 px * 615 px! mhh also wieder nichts

vielleicht bin ich auch im moment auf der völlig falschen denklogik.

ich will jetzt (würde mich darüber natürlich auch nicht beklagen) keinen komplett ausgecodeten denkansatz, sondern helft mir mal logikmäßig auf die sprünge

lg, urban-a

[Boris]

Das ist grundlegend der falsche Denkansatz. Am besten wäre es, deine Website hat an sich eine grundlegende, feste Breite (z.B. 760px für 800x600) - dementsprechend groß muss dann halt das Hintergrundbild sein.

Wobei ich dazu sagen muss, dass dann jeglicher Text, der da drauf steht (je nach Farbe des Bildes) schwer bis überhaupt nicht mehr lesbar wäre.

eine frage, es wird ja immer mehr zu mode, dass man als gestaltungselement fotos als hintergrundbilder einsetzt.

Glaube ich kaum. Kannst du davon mal ein Beispiel zeigen?

[urban-a]

nun deine idee entspricht ja dann überhaupt nicht dem was ich will

häng dich nicht an dem wort mode auf ist
1. geklaut
2. ein aufhänger satzal


was ich will ist sowas wie in diesem artikel: Klick

lg, urban-a

[satre]

Du solltest auch bedenken, dass große Bilder viel Traffic verbrauchen und deine Seite verlangsamen.

Einen anderen Ansatz findest du auf css Zen Garden, bei der das Hintergrundbild in der oberen, linken Ecke verankert ist und in die Hintergrundfarbe übergeht.

Das ist zwar nicht exakt das was du willst, aber eine schicke Alternative.

[321]

Ich bezweifle, dass das ein Hit sei, doch Dein Wunsch bleibt Deiner.

Die Seite von eu.Quicksilver.com hat aber auch das Problem mit der Grösse:
Das Bild ist sehr gross und beim Verkleinern des Fensters wird eben nur noch ein Teil des Bildes sichtbar.

Wenn du ein grosses Bild hast und die wichtigsten Teile in Bildmitte sind, kannst Du es als Hintergrund x- und y-zentriert positionieren. Beim Verkleinern/Vergrössern bleibt es dann immer mittig, was schon mal eleganter aussieht.
Vergiss nicht, eine Schriftfarbe und Font zu wählen, die über allen Bildteilen lesbar ist und bleibt.

[komp12]

Ich sag mal ganz frech: das geht nicht.
Von deinem Hintergrundbild wird immer was abgeschnitten, es sei denn Du nimmst die Angabe 100%. Aber dann hast Du natürlich nie ein klares Bild.
Einzige Möglichkeit sehe ich wie Boris beschrieben.
Ein Foto komplett auf dem Bildschirm darzustellen halte ich auch für gewagt.
Wie ist es mit dem Text und Grafikelementen?
Hast Du ein Beispiel? Bin nicht sicher ob ich sowas schon gesehen habe-wäre ja interessant!
Um Aufmerksamkeit zu erhalten reichen ja auch Teile eines Fotos.
Wie schon erwähnt hat der ZenGarden ja viele Beispiele oder diese Spielerei für einen Bekannten(letztentlich nicht realisiert). ...

Gruß Komp

[urban-a]

erstmals danke euch allen für die antworten

@321 klar das mit dem traffic stimmt, nur es geht im moment eher um spielerein und um das ausprobieren der möglichkeiten
das mit der mitte ist eine gute idee und
@komp12, danke für das beispiel das verdeutlicht mir das mit dem mittigen bg-bild!

Ich werde mich spielen und wenn es zu einem ergebnis kommt seit ihr die ersten die es erfahren

Danke!

lg, urban-a

[321]

von Traffic habe ich nichts gesagt, das weiss wohl jeder

Auch ein Bild mit rundem, ovalem oder rechteckigen Verlauf in die Hintergrundfarbe könnte bei Gefallen nützlich sein. Aber nicht mit IE-Filter, sondern das Bild vorbereiten.

[komp12]

@komp12, danke für das beispiel das verdeutlicht mir das mit dem mittigen bg-bild!

Das Bild ist nicht mittig!
Es wiederholt sich in x-Richtung (repeat-x)-also nur nach rechts; bei mittiger Ausrichtung muss es heißen: background-position:center top [evtl. mit:background-repeat:no-repeat]

Gruß Komp

[Corsachriz]

Zitat von komp12

Um Aufmerksamkeit zu erhalten reichen ja auch Teile eines Fotos.
Wie schon erwähnt hat der ZenGarden ja viele Beispiele oder diese Spielerei für einen Bekannten(letztentlich nicht realisiert). Klick

Gruß Komp

wow, als ich das Ding auf 1280 gesehen habe habe ich mich schon gefragt, wie das den jetzt auf 1024 aussieht, nach dem umstellen des Browsers hab ichs kapiert nicht schlecht nicht schlecht

[komp12]

thx
Obwohl ich ja dazu sagen muss das ich das im Ernstfall nicht so umsetzen würde.
Die Ladezeit ist doch recht lang. Wenn würde ich ehr eine Kombination aus Fotobackground und einem extra Inhaltsbereich machen und nicht alles in einem großen Bild.

Gruß Komp