Hintergrundbild

Ist nicht nachvollziehbar, der Code ist soweit wohl richtig. Mach mal eine Screenshot von dem, was bei dir angezeigt wird.
Besser wäre es, wenn du einen Link zu deiner Testseite angeben könntest mit den Bildern Foto1 und Foto2.

Achso, ein Feedback zu deinem bisherigen Problem wäre nicht verkehrt.

Ich ahne, dass ich dein Problem erkannt habe. Aber vorher möchte ich noch feststellen, dass der Quellcode nicht ganz fehlerfrei ist. Natürlich sollte auch der Wert bei width in Anführungszeichen stehen.

Ich vermute, du hast das Problem, dass dein Hintergrundbild unter deinem Foto1.jpg abgeschnitten ist. Das muss so sein. Du legst mit background-size nur fest, wie das Hintergrundbild skaliert wird. Das bedeutet nicht, dass es auch so groß dargestellt wird. Es ist ja nur der Hintergrund eines Elements. und das Element wird durch den Hintergrund nicht ausgedehnt. Da dein body unter dem Foto1.jpg endet, geht natürlich auch der Hintergrund des Body nicht weiter.

Damit der Body so hoch wie der Viewport wird, kannst du in deinen CSS-Bereich

html, body {
	  height:100%;
	}

einfügen.

ich denke mal das ist nicht der ganze Code
sondern nur ein Auszug aus dem -

und
das ist auch falsch:
<img src="Foto1.jpg" alt="Foto" width=100% height="200">

so is richtig:
<img src="Foto1.jpg" alt="Foto" width="100" height="200">

Gruß modem-kind
PS. Screenshot wirst schon mit Papa Googel hinbekommen

- - - Aktualisiert - - -

Zitat von Friedel

Du legst mit background-size nur fest, wie das Hintergrundbild skaliert wird. Das bedeutet nicht, dass es auch so groß dargestellt wird. Es ist ja nur der Hintergrund eines Elements. und das Element wird durch den Hintergrund nicht ausgedehnt.

Das stimmt so nicht -

Ein Hintergrund wird schon so Groß angezeigt wie man es angibt
entweder zb. mit px oder auch mit Cover

auch wenn es das Element nicht ausdehnt -
background: liegt ja nicht im Dom

Gruß modem-kind

Ob width="100%" oder Ob width="100" gemeint ist, weiß ich natürlich nicht. Aber in beiden Fällen mit Anführungszeichen.

Und was ich über background-size geschrieben habe, stimmt genau so. Das Hintergrundbild wird nicht 800px hoch angezeigt, weil der Hintergrund nicht so hoch ist. Der Body enthält nur eine Überschrift in Standardschriftgröße und ein Bild mit 200px Höhe. Deshalb ist der Body nicht 800px hoch und der Hintergrund wird abgeschnitten.

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

 width="100%" gibt auch weiterhin, auch in Html5. Ich kenne auch keinen Browser, der die Angabe ignoriert. Natürlich sollte man das nicht als Html-Attribut festlegen, sondern mit CSS. Aber es funktioniert nach wie vor und ist auch standardkonform.

Dass der Body automatisch immer so hoch ist, wie der Viewport stimmt auch nicht. Der Body ist ein Blockelement, und seine Höhe kann man mit den Attributen bestimmen, die für Höhenangaben von Blockelementen vorgesehen sind. Wenn man nichts angibt, ist der Body nur so hoch wie sein Inhalt. Wenn der Inhalt größer ist, als das Element, steht der Inhalt eben über und ist trotzdem sichtbar. Aber nur der Inhalt! Nicht der Hintergrund! (Allerdings halte ich es für möglich, dass es Browser gibt, die das anders machen.)

Aber es bringt nichts, darüber zu diskutieren. Das sollte man in der Spezifikation nachlesen und ausprobieren. Zum Ausprobieren muss ich allerdings sagen, dass ich (schon lange) keinen Rechner mit Windows mehr haben und mit aktuellen IE nicht testen kann.