✔ Hintergrundbild dynamisch an Bildschirmauflösung anpassen

Status
Nicht offen für weitere Antworten.
C

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?
 
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: 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.tutorials.de</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}

/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}

/* BG-Image auf unterste Ebene anordnen */
#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}
/* Body-Dummy absolut über BG-Image legen; Scrollbar bei Bedarf einblenden */
#bodyDiv{ position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          overflow: auto;
          width: 100%;
          height: 100%;
          text-align: center;}

/* Layoutelemente */
#mainDiv{ width: 600px;
          height: 100px;
          text-align: left;
          margin: 18px auto;}
#headDiv{ border: 1px solid #000;
          background: #efefef;}
#contentDiv{ border: 1px solid #000;
             background: #f0fff0;
             margin-top: 6px;
             height: 1000px;}
#footerDiv{ border: 1px solid #000;
            background: #fffff0;
            margin-top: 6px;}
 //-->
</style>
</head>
<body>
<img id="bgImg" src="hintergrund.jpg" width="100%" height="100%">
<div id="bodyDiv">
  <div id="mainDiv">
    <div id="headDiv">Header-Element</div>
    <div id="contentDiv">Content-Element</div>
    <div id="footerDiv">Footer-Element</div>
  </div>
</div>
</body>
</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
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück