Behalten Sie ein CSS-Hintergrundbild das gleiche unabhängig von der Benutzerauflösung

Question

Ich habe ein sehr großes Bild, das ich als CSS-Hintergrund verwenden möchte. Ich möchte jedoch, dass es unabhängig von der Auflösung, auf der sich der Benutzermonitor befindet, gleich aussieht. Das letzte Mal, als ich das versuchte, würde es bei verschiedenen Auflösungen abgeschnitten.

Sie können diese Art der dynamischen Größenanpassung nur in CSS durchführen? Oder sollte ich die Größe auf die gängigste Lösung reduzieren und auf das Beste hoffen?

Answer 1

Ich tat dies erst vor kurzem. Versuchen Sie Fullscreen jQuery Plugin, es ist großartig.

http://ajaxmint.com/2009/12/fullscreenr-lightweight-full-screen-background-plugin/

Answer 2

* { margin : 0; padding : 0; } 

html, body { height:100%; color : #FFF;} 

div#bgcontext { position : absolute; width : 100%; height : 100%; overflow : hidden; } 

div#background { position : fixed; right : 50%; width : 100%; height : 100%; z-index : -20; text-align : center;} 

div#background img { min-height: 100%; min-width : 1600px; max-width : 100%; margin-right : -100%;} 

Hier ist das Markup ...

<div id="bgcontext"> 

<div id="background"><img src="assets/bg.jpg" /></div> 

</div> 

</body> 

Dies wird ein dehnbares, fixierte, zentrierte Hintergrundbild erstellen ... Sie die min-width und min-height nach Ihren Wünschen anpassen können.