nicht angemeldet
Body Hintergrundbild beim scrollen abgeschnitten
0 0 0 
MudGuard
Body Hintergrundbild beim scrollen abgeschnitten
Hallo SELFTHTML'er,
ich stehe seit längerem vor einem Problem. Am besten ich beschreibe es mal. Es geht um ein Hintergrundbild im <body>. Da ich dieses Hintergrundbild nicht direkt im Body-Tag unterbringen kann (weil es , habe ich einen Div names blockBody eingefügt.
mein HTML Snippsel:
<html>
<head>
<title>Hallo Welt</title>
<style type="text/css">
<!--
* { margin:0; padding:0px;}
html { height:100%;}
body { height:100%;}
.blockBody { height:100%; background-image:url(/backround.gif); background_repeat:repeat-x;}
-->
</style>
</head>
<body>
<div class="blockBody">Hallo Welt</div>
</body>
</html>
So nun zu meinem Problem. Wenn man das Browser-Fenster soweit minimiert, das Scrollbars entstehen und man dann nach rechts scrollt, wird das Hintergrundbild nicht mehr bzw. nur im vorher sichtbaren Bereich angezeigt.
Was muss ich tun damit mein Hintergrundbild korrekt angezeigt wird? Also auch in dem Bereich der erst durch scrollen sichtbar wird.
Ich suche nach einer Lösung welche sowohl im IE als auch im Firefox funktioniert.
-
hi,
Wenn man das Browser-Fenster soweit minimiert, das Scrollbars entstehen und man dann nach rechts scrollt, wird das Hintergrundbild nicht mehr bzw. nur im vorher sichtbaren Bereich angezeigt.
Natürlich.
Du wolltest html, body und deinen Container ja explizit exakt 100% so hoch haben, wie der Viewport ist - und genau das hast du jetzt auch bekommen.
Wenn du das nicht willst, möchtest du also keine Höhe, sondern eine Mindesthöhe.
Ich suche nach einer Lösung welche sowohl im IE als auch im Firefox funktioniert.
Wie man den min-height nicht verstehenden IE-Versionen eine vorgaukelt, ist im Web zahlreich recherchierbar.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
super Antwort! Wenn mir was runterfällt finde ich die Menschen immer am besten, die einen darauf hinweisen anstatt es aufzuheben. Dann lieber vorbeigehen und nichts sagen. Wir wissen alle das das Internet kein 10Seiten Buch ist und nicht alles was man da so ließt auch stimmt. Ich dachte das hier sei einer dieser "InfoPunkte" im Netz wo man fragen kann. Und auch erwarten kann, eine konstruktive Antwort zu erhalten.
Das es unterschiedliche Interpretationen der einzelnen Browser gibt finde ich schon Hindernis genug, da helfen einem solche Antworten nicht weiter.
Nichts desto Trotz werde ich weiter suchen!
-
hi,
super Antwort! Wenn mir was runterfällt finde ich die Menschen immer am besten, die einen darauf hinweisen anstatt es aufzuheben. Dann lieber vorbeigehen und nichts sagen. Wir wissen alle das das Internet kein 10Seiten Buch ist und nicht alles was man da so ließt auch stimmt. Ich dachte das hier sei einer dieser "InfoPunkte" im Netz wo man fragen kann. Und auch erwarten kann, eine konstruktive Antwort zu erhalten.
Wenn du nur meckern willst, darfst du dich gerne in diesem Thread anschließen.
Allerdings solltest du vorher vielleicht noch mal genauer überlegen, ob dir eine hilfreiche Antwort nicht vielleicht schon gegeben wurde, und du sie vielleicht nur noch nicht verstanden hast - weil du zu oberflächlich gelesen hast, und gleich auf 180 warst, so dass du zum richtigen _Nachdenken_ über den Informationsgehalt der Antwort gar nicht mehr gekommen bist.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Oh je, ich möchte nicht meckern! Nur bin ich mittlerweile schon kurz vor 180. Ich schleppe dieses Prob schon Wochen mit mir rum und habe eben noch keine richtige bzw. funktionierende Lösung gefunden.
Ich gehe davon aus das du meine Frgae bzw. Problemstellung nicht nur oberflächlich gelesen hast, denoch muss ich anmerken das dein "Lösungsansatz" oder Hinweis zu weiteren Verfahrensweise nicht konstruktiv ist.
Ich schrieb doch von nach rechts scrollen und das mir da eine min-height weiterhelfen soll, glaube ich kaum. <- Krümmelkacker geht an mich ;-)
Nein, jetzt mal im Ernst. Ich bin ein kleines verirrtes Schäffchen und suche meinen Hirten. Wenn du mir den Weg zeigen willst, laufe ich dir gern hinterher!
Ist auch nicht so das ich eine Lösung vorgesagt haben will (was natürlich am besten wäre), da ich weiß wie mühsamm eine Rechersche zu diesem Thema sein kann. Ich habe schon auf diversen Seiten gelesen aber keine Lösung gefunden oder wenn dann habe ich's nicht verstanden (weil meist Hacks).
Um mein Prob nochmal in Erinnerung zu rufen ...
Wie muss ich einen Div formatieren damit ein Hintergrundbild auch beim scrollen über die komplette Breite das Bildschirmes angezeigt wird?
-
Ich schrieb doch von nach rechts scrollen und das mir da eine min-height weiterhelfen soll, glaube ich kaum.
Sicherlich nicht... eventuell aber eine min-width?
Und eine Google-Suche nach "min-width Internet Explorer" hat bei mir genau 0,16 Sekunden gedauert ;o)MfG
-
OMG, ich geb den Krümelkacker-Pokal ab! Bin dessen nicht würdig!
Habe ich mich nicht verständlich genug ausgedrückt, dann sagt das doch einfach. Aber solche kontraproduktiven Antworten möchte ich bitte in Zukunft nicht mehr!
Was willst du mir damit sagen, Benjamin? ... ja, ihr die ständig gefragten (oder eher sich ständig angesprochen fühlenden) Gurus solltet mal etwas vom Pferdchen runter kommen. Ihr wart auch mal die kleinen Fragenden!!! ... oder doch als Pro geboren?! ;-)
Ich habe mein Problem, meiner Meinung nach, klar geschildert. Die bisherigen Antworten geben mir aber das Gefühl mich nicht klar ausgedrückt zu haben. Also versuche ich es nochmal.
Wie muss ich ein DIV formatieren, damit ein gekacheltes Hintergrundbild auch beim Scrollen über die komplette Breite des Bildschirmes (also auch in dem Bereich der erst durch scrollen sichtbar wird) angezeigt wird. Mir geht es dabei speziell um die Darstellung im Firefox, da es im IE korrekt angezeigt wird!
Es ist ja nicht so, das ich nicht im Vorfeld recherschiert habe. Von "geht nur mit Hack" bis "ist derzeit nicht möglich" habe ich einiges gefunden, nur keine funktionierende Lösung!
Stecke ich das Hintergrundbild in den Body-Tag funktioniert es prima aber wenn ich das auf einen Div anwenden möchte funktioniert es nur im IE.
Vom Prinzip möchte ich da nix aussergewöhnliches, nur ein Div-Tag der sich wie der Body-Tag verhält.
P.S. ... oder soll ich echt wieder Tabellen verwenden? <- darauf muss nicht eingegangen werden, ist eher eine Art "Hilferuf" !!!
-
hi,
Wie muss ich ein DIV formatieren, damit ein gekacheltes Hintergrundbild auch beim Scrollen über die komplette Breite des Bildschirmes (also auch in dem Bereich der erst durch scrollen sichtbar wird) angezeigt wird. Mir geht es dabei speziell um die Darstellung im Firefox, da es im IE korrekt angezeigt wird!
Andreas hat dir doch ausführlich geantwortet, welche Breite dein Div annimmt.
Wenn du eine andere Breite haben willst, müsstest du diese explizit angeben. Davor stünde dann aber die Frage, wie sie zu ermitteln wäre.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
*heul*
ich habe min-width nachgeschlagen und probiert. Funktioniert nicht! Oder ich machs falsch!
Ich kann die Breite weder in Pixel noch in Prozent angeben, ich weiß nur das es die komplette Breite des Bildschirmes, einschließlich scrollbarer Bereich sein soll.
Wenn ich das gekachelte Hintergrundbild auf den Body-Tag anwende, brauche ich nicht solche min-width Angaben - da funktionierts auch so. Nun kann ich es aber nicht im Body-Tag anwenden, sondern muss einen Div-Tag benutzen. Der Div-Tag reagiert wiederum nicht so wie ein Body-Tag, denke das liegt an der Vorformatierung des Body-Tags.
Ich möchte hier auch keinen extralangen Thread erzeugen und mich über Antwortarten streiten. Bei mir steht das Problem im Vordergrund.
Lass uns einen Deal machen, ich poste hier nochmal meinen Quelltext und du schaust drüber und sagts mir was ich falsch oder anders machen sollte. OK?
[code lang=html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Hintergrundbild</title>
<style type="text/css">
<!--
html {
height:100%; /* fix height to 100% for IE */
padding:0; /* remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
body {
height:100%; /* fix height to 100% for IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
.blockBody {
height:100%;
background-image:url(/museumsplanung/wLayout/design/images/bg_body.gif); /* Höhe 30px & Breite 1px */
background-position:0 300px;
background-repeat:repeat-x;
}
-->
</style>
</head>
<body>
<div class="blockBody">
<div style="width:300px;">Hallo Welt</div>
</div>
</body>
</html>
[code]... ich hoffe mein Ziel ist klar, wenn nicht bitte fragen. Würde es auch per E-Mail machen damit das Forum nicht so belastet wird. ;-)
-
-
-
-
-
-
-
-
Hallo,
Da ich dieses Hintergrundbild nicht direkt im Body-Tag unterbringen kann (weil es , ..?
Nur der Neugier wegen. Wieso kannst Du es nicht im Body-tag unterbringen?
-
Hmmm, auf die Frage habe ich gewartet. Ich arbeite derzeit mit Weblication CMS und wenn ich da den Body-Tag formatiere wird die Formatierung in der Entwurfsansicht übernommen. Was ja auch sinnvoll ist, damit man sieht wie die Seite aussieht. Problem an der Geschichte ist, das der Wysiwyg-Editor eben diese Bodyformatierung übernimmt. Also ist jedes Textfeld auf der Seite mit dem Hintergrundbild ausgestattet, was bissle blöd aussieht und auch nicht richtig wäre.
Das Ganze im Weblication CMS zu ändern ist mir auch schon in den Sinn gekommen, aber das mache ich erst wenn ich keine andere Lösung finde.
Es muss doch möglich sein einen Div-Tag genau so zu formatieren wie der Body-Tag "vorformatiert" ist. Will doch nur ein waagerecht gekacheltes Hintergrundbild (Höhe 30px Breite 1px) einbinden was bei egal welcher Breite des Inhalts auch in Scrollbarem Bereich angezeigt wird.
MfG
-
hi,
Das Ganze im Weblication CMS zu ändern ist mir auch schon in den Sinn gekommen, aber das mache ich erst wenn ich keine andere Lösung finde.
Es ist doch die sauberste.
Warum willst du in HTML und CSS mit Mühe und Not einen Workaround finden - nur weil deine Werkzeuge zur Erstellung dieser unvorteilhaft arbeiten?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo Ihr zwei,
ich weiß nicht, ob das ein workaround oder eine saubere Lösung ist, was ich hier vorschlage.
Das Problem ist doch, daß das Hintergrundbild bis zur Breite seines divs kachelt und nicht weiter. Eine extra große Breite anzugeben, macht keinen Sinn, denn die erzeugt dann einen Scrollbalken nur wegen dieses divs und nicht wegen der Breite des wirklichen Inhalts.
Eigentlich ist der Ansatz mit width:auto (bzw. hier ohne Angabe) ja völlig OK, breiter als der Viewport braucht's nimmermehr!
Nur: Beim Scrollen bleibt das div mit dem Hintergrund natürlich an seiner ursprünglichen _Position_, und um die geht es hier eigentlich, nicht um die Breite.
Wenn ich dieses div jetzt zusätzlich mit
position:relative; left:0;formatiere, habe ich, was ich will (bzw. was m3 will).
Irgendetwas Anrüchiges an dieser Idee?
Shepard
-
Hallo Shepard,
erstmal vielen Dank für deine Antwort. Aber leider will es auch nicht funktionieren. Mach ich da was grundlegend falsch?
Hier noch mal mein Quelltext mit deinem Tip
<html>
<head>
<title>Hallo Welt</title>
<style type="text/css">
<!--
* { margin:0; padding:0px;}
html { height:100%;}
body { height:100%;}
.blockBody { position:relative; left:0; height:100%; background-image:url(/museumsplanung/wLayout/design/images/bg_body.gif); background-repeat:repeat-x;}
-->
</style>
</head>
<body>
<div class="blockBody">
<div style="width:300px;">Hallo Welt</div>
</div>
</body>
</html>... wenn ich aber das Browser Fenster kleiner als 300px Breite mache, erscheint ein Scrollbalken unten. Diesen Scrollbalken bewege ich jetzt und das Hintergrundbild bleibt am rechten Rand des urschrünglichen Viewport's abgeschnitten. Ich möchte aber das es sich weiter kachelt.
Villeicht haben wir uns nur falsch verstanden und du hast einen weiten Tip auf Lager ;-)
Danke im Vorraus
-
Hi,
sorry, da war ich so stolz auf meine Lösung (wenn es denn eine gültige Lösung ist), daß ich einen Teil vergessen habe, nämlich
overflow:autofür das div mit dem Background.Funktioniert bei mir in IE6, Opera 9.01 und FF 1.5 (alles Win).
Shepard
-
Hallo Shepard,
es funktioniert!!! *niederknie* *verbeug*
Hätte nicht gedacht das, nach der schweren Geburt gestern, nochwas konstruktives bei raus kommt. Aber so kann man sich täuschen.
Schon interessant was so ein overflow ausmachen kann. Danke!
------------------------
P.S. Kennt einer eine Übersicht wo man die Standard bzw. Vorformatierungen der einzelnen HTML-Tags nachlesen kann? Oder sollte ich an dieser Stelle einen neuen Thread eröffnen?-
Hallo m3.
P.S. Kennt einer eine Übersicht wo man die Standard bzw. Vorformatierungen der einzelnen HTML-Tags nachlesen kann? Oder sollte ich an dieser Stelle einen neuen Thread eröffnen?
Nein; es gibt keine. Du kannst dir jedoch in gewissem Maße eine erstellen.
Einen schönen Dienstag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
debian/rules
-
-
-
-
-
-
-
-
Hi,
.blockBody { height:100%; background-image:url(/backround.gif); background_repeat:repeat-x;}
Vielleicht hilft es ja, eine passende Angabe für background-repeat zu machen (dafür kannst Du background_repeat weglassen, diese Eigenschaft gibt es nicht).
(nein, hilft natürlich nicht, s.u.)Dein div hat keine explizite Breitenangabe. Also gilt width:auto, dank der fehlenden Angaben zu margin, padding und border läuft das auf width:100% raus.
Dein div ist also so breit wie der Viewport.
Daran ändert sich auch nichts, wenn um den Viewport herum Scrollbalken erscheinen.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
OK, das ist ja mal eine Aussage. Danke!
Bei background-repeat habe ich mich vertippt. *Ache auf mein Haupt*
Ich möchte einfach nur ein Hintergrundbild welches ich nicht in den Body packen kann in einen Div innerhalb des Bodys packen. Dieser Div soll sich dann genauso verhalten wie der Body-Tag. Also wenn man scrollen muss, egal ob rechts/links oder oben/unten (in meinem Fall rechts/links), soll sich das Hintergrundbild weiter "kacheln".
Bei meiner jetzigen Version wird es nur im IE ordnungsgemäß angezeigt, im Firefox hört das Bild am rechten Rand des "Viewport" auf sich zu "kacheln". Ich habe es auch mit min-width versucht, jedoch die richtige Anwendung (man sagte mir ja hier es gehe damit) nicht gefunden.
Da ich nicht weiß wie groß das breiteste Bild (oder auch Text) sein wird, kann ich min-width nicht verwenden. Mein Ziel ist ein Hintergrundbild (Höhe: 300px, Breite 1px) waagerecht zu "kacheln", auch wenn der Inhalt der Seite breiter ist als mein "Viewport".
Solltest du eine Lösung haben/finden/kennen, so würde ich mich sehr darüber freuen. Meine Recherschen und Versuche neigen sich so langsam dem Ende. Auf der eine Seite lese ich, das dies nicht möglich ist und hier gleich nebenan schickt man mich in die großen Weiten des WWW. Dabei dachte ich hier richtig zu sein. Aber vielleicht stimmt es ja, das es dafür keine browserübergreifende Lösung gibt!
-