Peter: Hintergrundbild an die Auflösung anpassen?

Ich habe eine Homepage mit der Auflösung von 1152x864 geschrieben
Dementsprechend sind auch meine Hintergrundbilder
Wenn ich sie mir jetzt in einer anderen Auflösung betrachte haut
das alles nicht mehr hin
Kann ich es irgendwie einrichten das sich das Hintergrundbild der Auflösung anpasst?

  1. Ich habe eine Homepage mit der Auflösung von 1152x864 geschrieben

    Wie hoch ist wohl der Prozentsatz der Besucher mit einer ebensolchen oder gar noch höheren Auflösung? Zwei Prozent? Fünf Prozent?

    Dementsprechend sind auch meine Hintergrundbilder

    Wie groß sind diese Bilder? Damit meine ich die Dateigröße. Sind sie größer als 20kb, lasse sie weg. Soll man den Text gut lesen können, auch.

    Wenn ich sie mir jetzt in einer anderen Auflösung betrachte haut
    das alles nicht mehr hin
    Kann ich es irgendwie einrichten das sich das Hintergrundbild der Auflösung anpasst?

    Nein. Nimm kleinere Bilder, die ab normalen Fenstergrößen vollständig angezeigt werden. Zur Not könntest du auch eine JS-Funktion schreiben, die ein der Fenstergröße angepasstes Bild als Hintergrund definiert, aber das ist fehleranfällig. Die Auflösung hat mit der Fenstergröße übrigens nicht wirklich etwas zu tun. Webseiten kennen keine Auflösung.

    LG Orlando

    --
    SELF-TREFFEN 2002
    http://www.rtbg.de/selftreffen/
    http://www.megpalffy.org/temp/penneninhh.html

    1. Wie hoch ist wohl der Prozentsatz der Besucher mit einer ebensolchen oder gar noch höheren Auflösung? Zwei Prozent? Fünf Prozent?

      Welche Auflösung haben denn die meisten Besucher?

      Wie groß sind diese Bilder? Damit meine ich die Dateigröße. Sind sie größer als 20kb, lasse sie weg. Soll man den Text gut lesen können, auch.

      Die Bilder sind alle über 20kb

      Nein. Nimm kleinere Bilder, die ab normalen Fenstergrößen vollständig angezeigt werden. Zur Not könntest du auch eine JS-Funktion schreiben, die ein der Fenstergröße angepasstes Bild als Hintergrund definiert, aber das ist fehleranfällig. Die Auflösung hat mit der Fenstergröße übrigens nicht wirklich etwas zu tun. Webseiten kennen keine Auflösung.

      Ok ich habe jetzt ein kleineres Bild aber da ist nun das Problem das es den Bildschirm nicht voll ausfüllt und der Rest mit Teilen des Bildes aufgefüllt wird Wie kann ich das verhindern?
      Wenn dann möchte ich dass das Bild zentral steht und der Rest darum
      weiß bleibt

      1. Hi,

        Welche Auflösung haben denn die meisten Besucher?

        tja, ich schätze derzeit 1024*768, wobei der effektive Platz im Browserfenster natürlich noch darunter liegt. Daher sollte man immer von einer relativ geringen Mindestgröße ausgehen oder besser noch gar kein Hintergrundbild verwenden, es lenkt sonst oft vom Text ab.

        Ok ich habe jetzt ein kleineres Bild aber da ist nun das Problem das es den Bildschirm nicht voll ausfüllt und der Rest mit Teilen des Bildes aufgefüllt wird Wie kann ich das verhindern?

        Das findest du hier: http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background_repeat

        Wenn dann möchte ich dass das Bild zentral steht und der Rest darum weiß bleibt

        Und das auf der gleichen Seite: http://selfhtml.teamone.de/css/eigenschaften/hintergrund.htm#background_position

        LG Orlando

        --
        SELF-TREFFEN 2002
        http://www.rtbg.de/selftreffen/
        http://www.megpalffy.org/temp/penneninhh.html

        1. Vielen Dank für deine Hilfe
          Ich habe es jetzt soweit hinbekommen

          1. Hi Peter,

            Vielen Dank für deine Hilfe
            Ich habe es jetzt soweit hinbekommen

            Was Du allerdings scheinbar noch nicht ganz verstanden hat — Orlando hatte das schon angesprochen —, ist die Problematik mit Hintergrundbildern und Bildschirmauflösungen generell.

            Du wirst niemals ermitteln können, wie groß genau der Anzeigebereich des Browsers Deiner Besucher ist! Du kannst zwar die Bildschirmauflösung checken, nur bringt Dir das rein gar nichts, wenn der User nicht im Vollbild surft. Weiterhin weißt Du nicht, welche Browserelemente aktiviert und deaktiviert sind, sprich ob der User nun 20 Taskleisten untereinander hat oder aber ganz minimalistisch nur mit einem Eingabefeld surft.

            Aus diesen Gründen benutzt man für professionelles Layout niemals Hintergrundbilder, die optisch vollständig angezeigt werden müssen, sprich als Fotoelement ins Layout der Webseite mit eingebunden sind und eigentlich skalierbar sein müßten.

            Man benutzt sie lediglich dann, wenn man als Entwickler der Webseite 100%-ig definieren kann, wie diese Backgroundbilder angezeigt werden. Simples Beispiel : Ein Farbübergang als Hintergrundbild, der links oben in der Ecke beginnt und in die Hintergrundfarbe der Webseite überläuft. Dieses Hintergrundbild wird quasi nach wenigen Pixeln "unwichtig", d.h. Du kannst es anschneiden (wenn z.B. das Browserfenster zu klein ist), ohne dass dadurch das Layout zerfetzt.

            Problematik klar?

            Es hindert Dich übrigens natürlich niemand daran, das Hintergrundbild sehr viel kleiner zu machen, als der Großteil der Bildschirmauflösungen, um es dann zentriert auszugeben, nur wüßte ich persönlich keine professionelle Seite, die so arbeitet — denn meist kann man sowas bedeutend eleganter lösen als durch den Einsatz eines Hintergrundbildes.

            Gruß,
            _Dirk

  2. Hallo Peter,

    ich will es nochmal auf den Punkt bringen, was meine Vorredner schon angeschnitten haben:
    1. Leg deine Webseite nicht auf eine bestimmte Bildschirmauflösung fest.
    2. Vergiss am besten die Bildschirmauflösung insgesamt. Die meisten  Besucher lassen ihren Browser nämlich NICHT im Vollbildmodus laufen.
    3. Vermeide große Grafiken (also solche, die viel Speicherplatz und damit Ladezeit erfordern). Wenn du deinen Besuchern hochwertige, hochauflösende Bilder anbieten willst, dann tu das über einen extra Link mit dem Hinweis, dass das Laden der neuen Seite einige Zeit dauern kann.
    Deine Besucher werden's dir danken.

    Gruß,

    Martin