1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Hintergrundbild dynamisch an Bildschirmauflösung anpassen

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von cyberoner, 19. November 2005.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. cyberoner

    cyberoner Mitglied

    Hi,

    also stehe grade vor dem Problem, das ich ein Hintergrundbild dynamisch an die Bildschirmauflösung anpassen möchte. Habe das Bild in einer Auflösung von 2126x1843 vorliegen. Muß mir also nicht wirklich Gedanken darum machen, das es zu pixelig werden könnte.

    Aber wie bekomme ich es jetzt hin, das es immer automatisch an die Bildschirmauflösung angepaßt wird?

    Muß ich das mit css, javascript machen? Oder geht es auch unter html?
     
  2. Quaese

    Quaese Moderator Moderator

    Hi,

    wenn das Hintergrundbild das gesamte Browserfenster ausfüllen soll, könntest du folgendes versuchen:
    1. Setze Breite und Höhe für Body (body) und Viewport (html) zu 100% und blende für beide die
      Bildlaufleiste aus. Außerdem muss padding und margin für den Body Null sein.
    2. Positioniere ein Bild absolut auf die unterste Ebene (z-index) in die linke obere Ecke. Den
      Attributwerten width und height weist du 100% zu.
    3. Erstelle einen "Body-Dummy", welcher absolut in die linke obere Ecke über die unterste
      Bildebene gelegt wird. Als Grössenangaben werden diesem Element 100% zugeordnet.
      Weiterhin wird mit overflow: auto das Einblenden der Bildlaufleisten ermöglicht.
    4. In dieses Dummy-Element kann nun das eigentliche Layout aufgenommen werden.
    HTML:
    1. <?xml version="1.0" encoding="iso-8859-1"?>
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html xmlns="http://www.w3.org/1999/xhtml">
    5. <title>www.tutorials.de</title>
    6. <style type="text/css">
    7.   <!--
    8. * { margin: 0;
    9.    padding: 0;}
    10.  
    11. /* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
    12. body, html{ width: 100%;
    13.            height: 100%;
    14.            overflow: hidden;}
    15.  
    16. /* BG-Image auf unterste Ebene anordnen */
    17. #bgImg{ position: absolute;
    18.        top: 0;
    19.        left: 0;
    20.        border: 0;
    21.        z-index: 1;}
    22. /* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
    23. #bodyDiv{ position: absolute;
    24.          top: 0;
    25.          left: 0;
    26.          z-index: 2;
    27.          overflow: auto;
    28.          width: 100%;
    29.          height: 100%;
    30.          text-align: center;}
    31.  
    32. /* Layoutelemente */
    33. #mainDiv{ width: 600px;
    34.          height: 100px;
    35.          text-align: left;
    36.          margin: 18px auto;}
    37. #headDiv{ border: 1px solid #000;
    38.          background: #efefef;}
    39. #contentDiv{ border: 1px solid #000;
    40.             background: #f0fff0;
    41.             margin-top: 6px;
    42.             height: 1000px;}
    43. #footerDiv{ border: 1px solid #000;
    44.            background: #fffff0;
    45.            margin-top: 6px;}
    46. //-->
    47. </head>
    48. <img id="bgImg" src="hintergrund.jpg" width="100%" height="100%">
    49. <div id="bodyDiv">
    50.   <div id="mainDiv">
    51.     <div id="headDiv">Header-Element</div>
    52.     <div id="contentDiv">Content-Element</div>
    53.     <div id="footerDiv">Footer-Element</div>
    54.   </div>
    55. </div>
    56. </body>
    57. </html>
    Das Beispiel funktioniert in den von mir getesteten Browsern (IE 5.0, IE 5.5, IE 6, Opera 7.54,
    Opera 8.5, Firefox 1.06 und Netscape 7.1).
    Opera hat jedoch Probleme mit der Anzeige, wenn das Browserfenster skaliert wird - eine
    korrekte Anzeige ist dann erst nach einem Reload möglich.

    Vielleicht kannst du ja etwas damit anfangen.

    Ciao
    Quaese
     
    chrissie70 gefällt das.
  3. ComFreek

    ComFreek Mod | @comfreek Moderator

    Ab CSS 3 gibt es auch background-size, z.B.:
    Code (CSS):
    1. #elem {
    2.   background-size: 100%;
    3. }
     
Die Seite wird geladen...
Status des Themas:
Es sind keine weiteren Antworten möglich.