tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von Quaese
ERLEDIGT
JA
ANTWORTEN
6
ZUGRIFFE
50808
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 19.11.05 09:00 #1
    cyberoner cyberoner ist offline Mitglied Bronze
    Registriert seit
    Oct 2003
    Beiträge
    26
    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. 19.11.05 09:13 #2
    Maik Tutorials.de Gastzugang
    Meines Wissens lässt sich eine Hintergrundgrafik nicht dynamisch an die Bildschirmauflösungen anpassen.

    Wenn es aber doch eine Möglichkeit geben sollte, dann würde die Grafik in den kleineren Auflösungen (z.B. 800*600) gestaucht dargestellt werden.
     
  3. 19.11.05 09:24 #3
    cyberoner cyberoner ist offline Mitglied Bronze
    Registriert seit
    Oct 2003
    Beiträge
    26
    das wäre ja nicht das problem. Entscheident ist nur, das ich diese Hintergrundgrafik halt mit in die Seite einbinden kann. Weil die Problematik ist ja, wenn ich das Bild z.B. auf 800x600 verkleinern würde und dann aber jemand mit einer Auflösung von 1024x768 sich die Seite anschauen würde, dann wird das Bild ja nicht gestreckt sondern wiederholt. Und das möchte ich einfach verhindern.
     
  4. 19.11.05 09:34 #4
    Maik Tutorials.de Gastzugang
    Mir ist da keine Technik bekannt, die die Dimension (2126*1843px) des Hintergrundbildes (background-image) entsprechend der Bildschirmauflöung skaliert, also z.B. auf 800*600 Pixel.
     
  5. 19.11.05 11:23 #5
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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-Code:
    <?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
    chrissie70 bedankt sich. 
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
  6. 19.11.05 12:02 #6
    cyberoner cyberoner ist offline Mitglied Bronze
    Registriert seit
    Oct 2003
    Beiträge
    26
    top das klappt einwandfrei! vielen Dank
     
  7. 19.11.05 12:09 #7
    Maik Tutorials.de Gastzugang
    Zitat Zitat von cyberoner

    top das klappt einwandfrei! vielen Dank
    Dann markiere das Thema bitte auch durch einen Klick auf den 'Status-Button' als 'erledigt'.

    Vielen Dank
     
« Site-Verlauf mit PHP programmieren! | Blocksatz in HTML »

Ähnliche Themen

  1. Homepage an Bildschirmauflösung anpassen
    Von ochriso im Forum HTML & XHTML
    Antworten: 5
    Letzter Beitrag: 23.01.11, 15:28
  2. Hintergrundbild an Bildschirmauflösung anpassen
    Von Nord-Süd-Richtung im Forum CSS
    Antworten: 1
    Letzter Beitrag: 26.06.09, 19:51
  3. Hintergrund und Tabellenlayout an Bildschirmauflösung anpassen
    Von nb79 im Forum HTML & XHTML
    Antworten: 11
    Letzter Beitrag: 09.08.07, 17:04
  4. Website der Bildschirmauflösung anpassen
    Von sunflower84 im Forum Javascript & Ajax
    Antworten: 14
    Letzter Beitrag: 29.07.05, 15:24
  5. Fenster anpassen an Bildschirmauflösung!
    Von Dark Dämon im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 12.02.02, 15:33