Hintergrundbild Dehnung und Ernte

Question

Bisher habe ich es geschafft, das Hintergrundbild zu erhalten zu strecken:

XHTML:

<div id="background"> 
    <img src="images/background.jpg" alt="Background" /> 
</div> 

CSS:

#background 
{ 
    width: 100%; 
    height: auto; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
} 

#background img 
{ 
    width: 100%; 
    height: 100%; 
} 

Dies funktioniert gut, außer das Bild wird von oben angezeigt, wenn die Höhe des Bildes die Fensterhöhe überschreitet. Dies bedeutet, dass der obere Teil des Bildes immer angezeigt wird, aber der untere Teil abgeschnitten wird. Ich möchte dies so ändern, dass das Bild immer von der Mitte aus angezeigt wird (so dass sowohl das obere als auch das untere Bild abgeschnitten wird und die Mitte des Bildes angezeigt wird).

Answer 1

Here is a good tutorial on creating a perfect full page background image. Das gleiche Konzept kann auch auf jedes ol 'Div angewandt werden.

Im Allgemeinen sollten Bilder, die als Hintergrundbilder gedacht sind, nicht im Markup selbst erscheinen. Sie mischen Präsentation mit Inhalt.

Answer 2

Wenn das img-Tag mit nicht eine absolute Notwendigkeit ist es entfernen und die folgenden drei Zeilen in Ihrer #background Klasse hinzufügen,

background-image:url(images/background.jpg); 
background-position:center; 
background-repeat:no-repeat; 

Die erste Zeile setzt den Hintergrund für den DIV. Die zweite Zeile positioniert es immer in der Mitte. Die dritte Zeile stellt sicher, dass der Hintergrund nicht wiederholt wird, was ich bei der Betrachtung Ihrer HTML-Struktur angenommen habe.

Mehr als glücklich, weiter zu empfehlen ist erforderlich.