Hintergrundbild - Breite und Höhe 100% (mit Hilfe von JQuery)

Kategorie: Javascript
Publikationsdatum: 29.03.2011
In manchen Design-Vorschlägen ist gewünscht, dass ein Hintergrundbild immer die komplette Browserbreit und -höhe abdeckt. Sprich, man erhält nie einen weißen Rand links, rechts oder unterhalt des Hintegrundbildes.
Wenn sich nun die Fensterbreite und -höhe ändert, werden die Maße des Hintergrundbildes angepasst. Bei der Vergrösserung des Browserfensters wird auch das Hintergrundbild vergrössert. Bei der Verkleinerung wird es dann halt verkleinert. Je nach Format des Browserfensters wird möglicherweise nur ein Ausschnitt des Hintergrundbildes sichtbar sein.

Die Lösung dieses Problems basiert auf der Javascript Library JQuery.

Der HTML-Aufbau ist recht einfach. Das Bild, welches direkt nach dem öffnenden body-Tag eingefügt wird, ist da Hintergrundbild. Das div mit id="inhalt" fungiert als Container für die eigentliche Seite.
HTML
  1. <img src="bg.jpg" id="hintergrund" title="" alt="" />
  2. <div id="inhalt" class="inhalt">
  3. <div style="width: 800px; height: 600px; border: solid 1px black; margin: auto; padding: 30px;">
  4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet, justo eget adipiscing suscipit, mauris nisl dapibus magna, eget gravida enim est faucibus dolor. Donec at leo vitae metus tempus consequat. Aliquam erat volutpat. Vestibulum eu leo tortor, eget mattis lorem. Sed pharetra turpis sit amet massa mattis dignissim.
  5. </div>
  6. </div>
Die CSS-Angaben werden entweder direkt im <head> oder per Stylesheet eingebunden. Die html- und body-Angaben bitte an die eigenen Wünsche anpassen.
CSS
  1. html {
  2. overflow-y: scroll;
  3. }
  4.  
  5. body {
  6. margin: 0px;
  7. padding: 0px;
  8. }
  9.  
  10. /* Positionierung des Hintergrundbildes */
  11. #hintergrund {
  12. position: fixed;
  13.  
  14. top: 0;
  15. left: 0;
  16. }
  17.  
  18. /* die Breite des Hintergrundbilds wird auf 100% gesetzt */
  19. .hintergrund_breite {
  20. width: 100%;
  21. }
  22.  
  23. /* die Höhe des Hintergrundbilds wird auf 100% gesetzt */
  24. .hintergrund_hoehe {
  25. height: 100%;
  26. }
  27.  
  28. /* eigentliche Seite */
  29. .inhalt {
  30. position: relative;
  31. }
Den Javascript-Code bitte ebenfalls im <head> einbinden.
Verändert sich die Browsergröße wird die Funktion resizeHg aufgerufen. Je nach Seitenverhältnis (Quer- oder Hochformat) wird dann die Klasse des Hintergrundes (100%-Breite oder -Höhe) gesetzt.
Javascript
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
  3. $(function() {
  4.  
  5. var fenster = $(window);
  6. var $hintergrund= $("#hintergrund");
  7. var seitenverhaeltnis = $hintergrund.width() / $hintergrund.height();
  8.  
  9. function resizeHg()
  10. { if((fenster.width() / fenster.height()) > seitenverhaeltnis )
  11. { $hintergrund.removeClass();
  12. $hintergrund.addClass('hintergrund_breite');
  13. }
  14. else
  15. { $hintergrund.removeClass();
  16. $hintergrund.addClass('hintergrund_hoehe');
  17. }
  18. }
  19.  
  20. fenster.resize(function()
  21. { resizeHg();
  22. }).trigger("resize");
  23.  
  24. });
  25. </script>
Stichwörter: HTML, CSS, JQuery, Hintergrundbild
 
 
NACH OBEN