Hintergrund automatisch anpassen

joel-87 · 23. Juli 2007

Hallo,
ich bin dabei eine eigene Webseite zu erstellen. Das Hintergrundbild ist momentan auf 1280x1024 px zugeschnitten. Ich möchte es gerne so machen, dass sich das Bild bzw. die Webseite dem User anpasst, genauer gesagt der Bildschirmauflösung. User der Auflösung 1024x768 sollen die Webseite auf ihrem Bildschirm komplett sehen und nicht scrollen müssen.

Könnte ihr mir einige Tipps geben, wie ich das Problem beseitigen kann.

BadByte · 23. Juli 2007

du könntest entweder mit javascript checken welche Auflösung der user hat und dann erst das passende Bild laden - oder das Bild zerlegen, und in einer Tabelle darstellen.....

Lar337 · 23. Juli 2007

Ein 1280x1024er Bild lässt sich auf einem 17/19" TFT übrigens auch nicht in Originalgröße anzeigen, da man ja noch die ganzen Browserleisten hat

joel-87 · 23. Juli 2007

wie meinst du das "zerlegen, und in einer Tabelle darstellen"?

gibt es denn schon ein fertiges Skript, weil selbst programmieren, dass kann ich nicht.

cheft · 24. Juli 2007

Ich würde nach möglichkeit auf JavaScript verzichten, da muss nur mal einer JavaScript abgeschalten haben und schon funktioniert das ganze nicht mehr.

Hier meine quick und dirty Methode:

HTML:

<html>
 <head>
  <style>
   body    { margin:0px; }  
   div.background  { position:absolute; top:0px; left:0px; z-index:0 }
   div.text  { position:absolute; top:0px; left:0px; z-index:1 }
   img.background  { width:100%; }
  </style>
 </head>
 
 <body>
        <div class="background">
            <img class="background" src="hg.jpg">
        </div>
        <div class="text">
         Und hier der Text
        </div>
 </body>
<html>

Nicht schön, aber selten

..... Und funktionsfähig.
Du wirst nur ein bischen mit denn CSS Style werten spielen müssen

joel-87 · 24. Juli 2007

Cool, das sieht schon mal nicht schlecht aus. Danke sehr

Was meinst du mit den Werten rumspielen?

cheft · 25. Juli 2007

Naja, gerade die Angaben für den Style:
div.text, hier wirst du die Werte bei top und left ändern müssen, sonst fängt jeder Text den du in das 2. Div eingibst links oben in der Ecke an...

Aber wenn ich so darüber nachdenke ist die Lösung vieleicht doch nicht so geschickt. Es wird zwar das Hintergrundbild an die Größe des Browserfensters angepasst, aber die Textposition leider nicht.

joel-87 · 25. Juli 2007

aso, trotzdem danke. Gibt es denn noch eine andere Möglichkeit wie man die HP an die Auflösung anpassen kann?

Wie schon vorher erwähnt, entsteht links meine Navigation. Dort erstelle ich Rolloverbuttons, diese sollen sich natürlich auch an die Größe anpassen. Das ist wahrscheinlich noch schwieriger oder?

Bitte helft mir !!!

Backslash · 25. Juli 2007

Naja, ist halt viel Aufwand aber du kannst auch für jede der Standardauflösungen eine eigene Seite machen und dann die entsprechende laden.
Die Anpassung wäre so am besten.
mfg

BadByte · 25. Juli 2007

also meine Idee währe gewesen, das Bild zu zerschneiden und dann eine Tabelle zumachen, wo du die Einzelnen Elemente des Bildes als Hintergrundbilder verwändest.
Die einzelnen Grafiken, kannst du dann als Bilder einfügen, so dass sie wie der Text sich der Seitengröße anpassen....

gruß: clemix

joel-87 · 25. Juli 2007

das klingt gut, ich wollte sowieso keine frames verwenden, sondern nur tabellen. werde ich mal ausprobieren.

hätte nicht dagegen, wenn es noch mehr tipps gibt

Suche

Hintergrund automatisch anpassen

joel-87

Lt. Commander

BadByte

Lt. Junior Grade

Lar337

Fleet Admiral

joel-87

Lt. Commander

cheft

Lt. Junior Grade

joel-87

Lt. Commander

cheft

Lt. Junior Grade

joel-87

Lt. Commander

Backslash

Captain

BadByte

Lt. Junior Grade

joel-87

Lt. Commander

Ähnliche Themen