nicht angemeldet
Hintergrundbild wird außerhalb des Sichtfeldes abgeschnitten
0 
JürgenB
0 
Camping_RIDER
Hintergrundbild wird außerhalb des Sichtfeldes abgeschnitten
Gunnar Bittersmann
AugeHallo,
ich bin relativer html-Neuling. Auf meinem Blog möchte ich ein Hintergundbild einfügen. Allerdings zieht es sich nicht über den ganzen Bildschirm bzw. ist abgeschnitten. Folgenden Code habe ich eingefügt:
<body background="https://secure.static.tumblr.com/a9496330dcc7f28283d0fcff34d5a344/bffshrb/t3un97qmy/tumblr_static_a5fvus7gl0ggks04cwocog8ww.jpg"bgproperties="fixed">
So sieht es auf der Website aus:
http://cornflowerblueblog.tumblr.com/
Ich würde mich über eure Hilfe sehr freuen :)
-
Hallo Cornflower,
du musst uns noch verraten, was genau passieren soll:
-
soll das Bild ganz auf der Seite zu sehen sein, evtl. mit Rändern an den Seiten oder unten?
-
soll das Bild auf Seitengröße "gequetscht" werden?
-
soll unten oder an der Seite ein Extensiondisplay ausklappen das den Rest zeigt :)?
Hier schon mal ein Link zu etwas Hintergrundwissen: http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background
Gruß, Jürgen
-
-
Aloha ;)
ich bin relativer html-Neuling.
Umso besser ;) Dann kannst du von vornherein lernen wie du's richtig machst :D
Auf meinem Blog möchte ich ein Hintergundbild einfügen. Allerdings zieht es sich nicht über den ganzen Bildschirm bzw. ist abgeschnitten. Folgenden Code habe ich eingefügt:
<body background="https://secure.static.tumblr.com/a9496330dcc7f28283d0fcff34d5a344/bffshrb/t3un97qmy/tumblr_static_a5fvus7gl0ggks04cwocog8ww.jpg"bgproperties="fixed">
...und dazu gehört zunächst mal, strikt zwischen Inhalt (HTML) und Präsentation (manche nennen das auch Design, CSS) zu trennen. Präsentationsbedingte Attribute haben in HTML nichts verloren. Ein Hintergrundbild gehört über CSS eingebunden.
Dazu sind folgende Artikel hilfreich:
CSS/Stylesheets in Dokumente einbinden
CSS/Hintergrundfarben und -bilder
CSS/background-image
CSS/background-attachmentIn deiner CSS-Datei muss dann also in etwa folgendes stehen:
body { background-image:url(https://secure.static.tumblr.com/a9496330dcc7f28283d0fcff34d5a344/bffshrb/t3un97qmy/tumblr_static_a5fvus7gl0ggks04cwocog8ww.jpg); background-attachment:fixed; }und in html steht dann nur noch schlicht und ergreifend
<body>Das mal zur formal richtigen Definition.
So sieht es auf der Website aus:
http://cornflowerblueblog.tumblr.com/
Ich hab das oben nebenher per Entwicklertools auf deiner Seite getestet. Und ich kann dich erleichtern: Wäre da nicht die Maxime der Trennung von Inhalt und Präsentation hättest du alles richtig gemacht, dein Code bewirkt für die Darstellung das Gleiche wie meiner.
Offensichtlich bleibt deine Blume wie gewünscht stehen. Das Problem ist nur (rein visuell beschrieben): Der weiße Hintergrund 'des Elements darunter' schiebt sich beim Scrollen über deine Blume. Müssen wir also noch herausfinden, wo da das Problem liegt.
Die Analyse deiner Seite per Browser-Entwicklertools sagt mir folgendes:
Das Grundelement html ist per CSS auf eine Höhe von 100% (also einmal die Bildschirmhöhe in diesem Fall) eingestellt (theme.css, Zeile 270). Das ist nicht gut. Das bedeutet: Das Element hat nur die Höhe einer Bildschirmhöhe. Alles andere, das du darunter noch siehst, ist im "overflow-Bereich", wird also zwar angezeigt, ist aber außerhalb der Box des html-Element. Das Hintergrundbild erstreckt sich logischerweise aber nur auf die Box. Auch das body-Element hat übrigens eine erzwungene Höhe von 100%, auch das ist potenziell ungut (wenn auch hier zunächst egal, da sich 100% an der Größe des Elternelements ausrichtet).
Du hast zwei Möglichkeiten - und bitte benutze die erste, die Zweite steht nur der Vollständigkeit halber da:
1.: theme.css, Zeile 270, height:100% von html löschen (das reicht eigentlich schon) und eventuell zusätzlich theme.css, Zeile 274, height:100% von body löschen (da nutzlos & potenziell problematisch)
2.: Dem html-Element ein overflow:auto geben und die height:100% von body löschen
Warum du das 2. nicht benutzen sollst: Damit würdest du nur die browsereigene automatische Scrollfunktion nachbauen. Erst einmal wäre das vollkommen sinnlos und lediglich verwirrend. Außerdem: Das funktioniert bei Desktop-Browsern wunderbar, bei Mobilbrowsern (insbesondere beim Pinch-Zoomen) bekommst du dann aber u.U. unnötige Schwierigkeiten (da der Pinch-Zoom nicht den Viewport [Bildschirmgröße] verändert und sich dadurch ungewöhnlich auswirkt). Warum habe ich die 2. Möglichkeit dann genannt? Ganz einfach: Wären es nicht gerade die Elemente html und body, sondern 2 irgendwie eingebundene Boxen im Content, dann würde ich u.U. zweiteres benutzen, da es da keine browsereigene, automatische Scrollfunktion gibt.
Ich würde mich über eure Hilfe sehr freuen :)
Immer gern, wenn jemand so nett fragt ;)
Grüße,
RIDER
P.S.: An alle Mitleser: Man merkt wieder einmal, wie schnell und zielgerichtet man helfen kann, wenn das fragliche Beispiel live verlinkt ist... Nicht so wie in manch anderen Threads, in denen mit sinnentfremdend verstümmelten Codeschnipseln um sich geworfen wird und man 10 Postings braucht, um überhaupt nur das Problem zu identifizieren...
--
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[-
@@Camping_RIDER:
nuqneH
Präsentation (manche nennen das auch Design, CSS)
Diejenigen, die keine Ahnung haben, was Design ist.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Hallo
Präsentation (manche nennen das auch Design, CSS)
Diejenigen, die keine Ahnung haben, was Design ist.
Tschö, Auge
--
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
Terry Pratchett, "Wachen! Wachen!"
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
Veranstaltungsdatenbank Vdb 0.3
-
-