BG-Bild dynamisch zur Browserhöhe

[Kim]

Hallo,
und zwar hab ich ein kleines Problem mit meinem Hintergrundbild.

Ich hab in die mitte einen Container gesetzt, der ein gekacheltes Hintergrundbild hat. Soweit so gut, nur wie stell ich die höhe so ein, dass sie sich anpasst, wenn in dem Container mehr inhalt ist und man scrollen muss.

Über height:100%; wird es irgendwann abgehackt und wenn ich height:x px; eingebe ist das Hintergrundbild bei manchen HTML-Dateien zu weit aus dem Bild oder ebenfalls abgehackt (je nach Pixelgröße).

  
#bg{  
  background-image:url(grafiken/bg.png);  
  background-repeat:repeat;  
  position:absolute;  
  top:235px;  
  left:50%;  
  margin-left:-483px;  
  width:960px;  
  height:1205px;  
}  

Google hat mir leider nicht das ausgespuckt, nachdem ich gesucht habe und auf Selfhtml habe ich darüber auch noch nichts erfahren.

Wäre nett, wenn jemand einen Tipp oder einen Link hätte. Danke schon mal.

[LX]

background-position vielleicht?

Gruß, LX

[apsel]

Om nah hoo pez nyeetz, Kim!

background-attachment könnte ebenso von Interesse sein.

Matthias

[Gunnar Bittersmann]

@@Kim:

nuqneH

Ich hab in die mitte einen Container gesetzt, der ein gekacheltes Hintergrundbild hat. Soweit so gut, nur wie stell ich die höhe so ein, dass sie sich anpasst, wenn in dem Container mehr inhalt ist und man scrollen muss.

Was genau ist dein Problem? Wessen Höhe soll sich anpassen? Die des Hintergrundbildes? [1] Die des Containers? [2]

[1] Darauf hat CSS 3 eine Antwort. [CSS3-BACKGROUND §3.4]

Bis die gängigen Browser dies unterstützen, bleibt

[2] mit JavaScript die Höhe des Containers abfragen ('offsetHeight') und auf das nächste Vielfache der Höhe des Hintergrundbildes setzen.

Qapla'

[ChrisB]

Hi,

Bis die gängigen Browser dies unterstützen, bleibt

[2] mit JavaScript die Höhe des Containers abfragen ('offsetHeight') und auf das nächste Vielfache der Höhe des Hintergrundbildes setzen.

In Pixeln? Dann müsste aber auch die eventuelle Veränderung der Höhe des Inhaltes permanent überwacht werden.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

In Pixeln? Dann müsste aber auch die eventuelle Veränderung der Höhe des Inhaltes permanent überwacht werden.

Ich kann dem OP nicht entnehmen, dass sich der Inhalt dynamisch ändern soll.

Und wenn der Container eine feste Breite hat*, sollte bei statischem Inhalt seine Höhe sich nicht ändern.

Qapla'

* was er nicht haben sollte

[ChrisB]

Hi,

In Pixeln? Dann müsste aber auch die eventuelle Veränderung der Höhe des Inhaltes permanent überwacht werden.

Ich kann dem OP nicht entnehmen, dass sich der Inhalt dynamisch ändern soll.

Und wenn der Container eine feste Breite hat*, sollte bei statischem Inhalt seine Höhe sich nicht ändern.

Muss ich dir jetzt wirklich erzählen, wie sich bspw. die Änderung der Schriftgrösse durch den Benutzer auswirken kann?

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Muss ich dir jetzt wirklich erzählen, wie sich bspw. die Änderung der Schriftgrösse durch den Benutzer auswirken kann?

Gibt es noch Browser, die nur die Schriftgröße skalieren, nicht aber (in Pixel festgemeißelte) Breiten, Grafiken etc.?

Wenn die Breite nicht in Pixel festgemeißelt ist, sollte man auf das 'resize'-Event horchen.

Feuert bei Schriftgrößenänderung eigentlich ein Event oder müsste man tatsächlich alle 42 Millisekunden nachschauen, ob noch alles im Rechten ist?

Qapla'

[Gunnar Bittersmann]

@@Kim:

nuqneH

#bg{
  --8<--
  position:absolute;
  top:235px;
  left:50%;
  margin-left:-483px;
  width:960px;

Das ist äußerst sinnfrei. Bei schmalem Viewport ragt der Inhalt aus diesem heraus, ohne dass eine Scrollbar angeboten wird; Teile des Inhalts sind nicht lesbar.

Blockelemente zentrierst du horizontal mit 'margin: auto'. 'position:absolute; top:235px; left:50%; margin-left:-483px' entsorgst du umweltgerecht.

Und um bei schmalem Viewport kein horizontales Scrollen zu erzwingen, gibst du statt 'width:960px' besser 'max-width: 960px' an.

Qapla'

[Kim]

@@Kim:

nuqneH

#bg{
  --8<--
  position:absolute;
  top:235px;
  left:50%;
  margin-left:-483px;
  width:960px;

Das ist äußerst sinnfrei. Bei schmalem Viewport ragt der Inhalt aus diesem heraus, ohne dass eine Scrollbar angeboten wird; Teile des Inhalts sind nicht lesbar.

Blockelemente zentrierst du horizontal mit 'margin: auto'. 'position:absolute; top:235px; left:50%; margin-left:-483px' entsorgst du umweltgerecht.

Und um bei schmalem Viewport kein horizontales Scrollen zu erzwingen, gibst du statt 'width:960px' besser 'max-width: 960px' an.

Qapla'

Weiß gar nicht wo ich antworten soll. :)

Das mit dem Zentrieren ist interessant, danke für den Tipp. Nur wenn ich kein Top mehr habe, fängt er von oben an und das soll er nicht.

Aber schade, dass du nicht auf meinen eigentlich Wunsch eingegangen bist.

So sieht es in etwa aus:

Und der Container mit dem BG soll immer am unteren Ende des Browserfensters aufhören oder dementsprechend wenn mehr Text da ist, weiter nach unten gehen. Mit 100% geht es nicht. Und mit Pixelangaben muss ich es bei jeder HTML-Datei einzelnt anpassen.

Danke erst mal an alle. :)

[Gunnar Bittersmann]

@@Kim:

nuqneH

Das mit dem Zentrieren ist interessant, danke für den Tipp. Nur wenn ich kein Top mehr habe, fängt er von oben an und das soll er nicht.

'margin-top'?

Aber schade, dass du nicht auf meinen eigentlich Wunsch eingegangen bist.

Ich dachte, das wäre ich. Nur war (mir) nicht offensichtlich, was dein Wunsch war.

So sieht es in etwa aus:

Und was befindet sich über dem und links und rechts des Containers mit dem BG?

Qapla'

[Kim]

@@Kim:

nuqneH

Das mit dem Zentrieren ist interessant, danke für den Tipp. Nur wenn ich kein Top mehr habe, fängt er von oben an und das soll er nicht.

'margin-top'?

Aber schade, dass du nicht auf meinen eigentlich Wunsch eingegangen bist.

Ich dachte, das wäre ich. Nur war (mir) nicht offensichtlich, was dein Wunsch war.

So sieht es in etwa aus:

Und was befindet sich über dem und links und rechts des Containers mit dem BG?

Qapla'

Ja, background-repeat zieht es nach unten, das ist mir bekannt. Aber das bild wird NUR angezeigt, wenn ich die Höhe eingebe, also Pixel oder Prozent. Wenn ich also height:200px; angebe um das Bild anzuzeigen, geht background-repeat-y auch nur 200px nach unten.
So ist es ein vorgegebener Wert und das will ich ja grade nicht.

Bei dem offsetHeight bin ich etwas skeptisch, da manche Benutzer Javascript blocken und ich sowieso noch nicht so viel Ahnung generell habe und von Javascript noch weniger. :)

[Gunnar Bittersmann]

@@Kim:

nuqneH

Zitiere bitte sinnvoll, nicht alles!

Dann läufst du auch weniger Gefahr, etwas zu übersehen:

Und was befindet sich über dem und links und rechts des Containers mit dem BG?

Qapla'

[Kim]

@@Kim:

nuqneH

Zitiere bitte sinnvoll, nicht alles!

Verzeihung.

Und was befindet sich über dem und links und rechts des Containers mit dem BG?

Darüber ist die Menüleiste. Rechts und links soll es frei bleiben.

[Gunnar Bittersmann]

@@Kim:

nuqneH

Und was befindet sich über dem und links und rechts des Containers mit dem BG?

Darüber ist die Menüleiste. Rechts und links soll es frei bleiben.

Ein 'div[@id="bg"]' ist nicht erforderlich.

Gib 'body' die gewünschte (Maximal-)Breite, zentriere ihn per 'margin: 0 auto' innerhalb des Viewports ('html').

Gib 'body' (und dessen Vorfahren(!) 100% Höhe und in der Vertikalen kein 'margin', 'border', 'padding'. Gib 'body' das gekachelte Hintergrundbild, ggfs. mit 'background-position', wenn es sich oben nahtlos an die Menüleiste anschließen soll.

Die die Menüleiste erhält auch einen Hintergrund, der den des 'body' überdeckt.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Gib 'body' (und dessen Vorfahren(!) 100% Höhe

Nö, für 'body' nicht Höhe, sondern Mindesthöhe.

Qapla'