Leander: Mit CSS Website skalieren, inkl. Background

Hallo!

Meine Homepage ist hintergrundorientiert, sprich, ich möchte den Hintergrund komplett ohne Scrollbalken angezeigt haben. Es funktioniert mit 1024x768 und aufwärts, allerdings ist alles auf höheren Auflösungen wie 1920x1080 sehr klein.

Link:

http://seelenpuls.llcp.at/index_de.php

Im Net ist beschrieben, wie man ein Background-Image auf Fullscreen bringt, sodass der komplette Bildschirm je nach Auflösung gefüllt wird, siehe:

http://tutsandtipps.the-netbrain.de/tutorials/vollflaechige-hintergrundbilder-nur-mit-css

Allerdings stört mich, dass das Bild so groß wird. Hab einige Links besucht, gelesen, herumprobiert, hab aber keine Lösung gefunden.

Was ich gern hätte:

  1. Die Divs sollen prozentuell mitskalieren...
  2. Der Hintergrund aber auch.

Sprich, meine Website ganz oben soll insgesamt komplett größer werden je nach Auflösung, allerdings mit einem Maximalwert hinsichtlich der Width. Weiters sollte alles zentriert sein mit Rand rundherum. Allerdings habe ich gelesen, dass das CSS-Fullscreen-Beispiel nur mit 100% width und height funktioniert.

Gibt es grundsätzlich eine Lösung mit CSS, mit der sowohl die Divs samt Text (die Textgrößer kann gleich bleiben) UND der Hintergrund mit der Auflösung mitskalieren?
Maximal soll der Hintergrund bei 1920x1080 ca. 1300x890 sein.

  1. Gibt es grundsätzlich eine Lösung mit CSS, mit der sowohl die Divs samt Text (die Textgrößer kann gleich bleiben) UND der Hintergrund mit der Auflösung mitskalieren?

    Da die Bilder noch nicht so weit mit ihrer Intelligenz sind, kann ich dir nur raten mittels Javascript zu prüfen wie die Maße des Besucherbildschirms sind und dann auf dieser Grundlage ein entsprechendes Bild einzufügen. So wie Du es möchtest ist es nach meiner Erkenntnis noch nicht möglich, wenn ich dein Problem richtig erfasst habe. Da hast du dann auch schon gut recherchiert.

    1. Ok, danke.

      Und wie ist bei http://tutsandtipps.the-netbrain.de/demos/demo1/background-image-demo.htm das halbtransparente Mittelteilbild gemacht vom Code her?

      1. Und wie ist bei http://tutsandtipps.the-netbrain.de/demos/demo1/background-image-demo.htm das halbtransparente Mittelteilbild gemacht vom Code her?

        Das ist ein Hintergrundbild mit Alpha-Transparenz.

        Gruß
        Ole

  2. Hallo

    1. Die Divs sollen prozentuell mitskalieren...
    2. Der Hintergrund aber auch.

    Nutze relative Größen wie (r)em oder % und ggf. auch Media Queries

    Gruß
    Ole

    1. Om nah hoo pez nyeetz, Ole!

      Nutze relative Größen wie (r)em oder % und ggf. auch Media Queries

      und das in Verbindung mit background-size

      Matthias

      --
      1/z ist kein Blatt Papier.