Hey Friedel,
also width="100%" gibt es nicht ! -wird sowieso ignoriert vom Browser-
"Das Hintergrundbild wird nicht 800px hoch angezeigt" ? DOCH !
Zitat
Deshalb ist der Body nicht 800px hoch und der Hintergrund wird abgeschnitten.
stimmt nicht !
bei body gilt erstmal der Viewport
wenn keine px Angaben gemacht wurden oder mehr Content vorhanden
als der Viewport Groß ist
ist der Viewport kleiner als das Bild bzw. die Background-size Angabe
wird es trotzdem so gerendert und angezeigt nur eben nicht voll sichtbar -
Aber mindestens so viel wie der Viewport oder wenn das Bild kleiner als Viewport ist eben alles
body kann sogar 0px hoch sein es Interessiert nur der Viewport -
bei mehr Content im body als der Viewport Größe wird dann
vom background oder background-image auch mehr sichtbar -
ist der Viewport zb. 400px höhe
der Body unter 400px zb. 0px oder 280px oder 399px
das Hintergrundbild aber zb. 1200px in echt ,oder angegebener Size zb. 1200px höhe
werden auch nur maximal 400px dessen Sichtbar sein.. / aber das Bild ist voll vorhanden gerendert
gibst du dem body dann zb. height: 1300px siehst Du den ganzen background // scollbar
bei anderen Elementen ist es ähnlich
nur das es Nicht mit dem Viewport in zusammenhang steht
sondern nur mit Ihrer tatsächlichen höhe // was dann quasi deren "Viewport" ist
(also besser - ihr View -)
ist dann auch entsprechd viel oder wenig vom Background zu sehen -
DURCH seinen Content oder height: Angabe // bei block oder. inline-block Elementen
und nicht scrollbar erscheint
Alles etwas anders ist es nochmal bei background-image: contain; /mal ausprobieren /
Eine andere Möglichkeit ein Background bzw. Background-image nicht zu sehen oder nicht ganz -
ist wenn andere Elemente im Element vorhanden sind
die selbst ein Background bzw. Background-image haben.
(oder anderen Deckenden Content)
immer dran denken - jedes Element ist grundsätzlich erstmal Transparent
nur der Background und der Content erscheinen Sichtbar -
last but not least .. bei der breite width ist es alles genauso -
Gruß modem-kind
...siehe dazu auch Document Objekt Modell = DOM