Hintergrundbild auf Bildschirmgröße anpassen

    Ich hatte vor ein einziges (großes) Bild als Hintergrundbild zu benutzen, aber es funktioniert nicht so wie ich es will.


    Eigentlich wollte ich es so haben, das sich das Bild verkleinert wenn das Bild halt zu groß ist und das es sich vergrößert wenn es zu klein ist.


    Das Bild ist 1200x900 Pixel groß (damit es nicht so pixelig ist bei Vergrößerungen) und wirkt an den Rändern tranparent sodass das Bild auch im Breibildformat gut aussieht


    Hier ist mein bisheriger Code :


    Code
    <body style="background:url(bild.jpg) no-repeat center top;  background-attachment:fixed">


    Da ich halt nicht weiß wie ich das mit den Größen hinbekomme habe ich das erstmal weggelassen.


    Kann man meine Idee irgendwie realisieren?


    Gruß CyberX

    ich würde sowas fortlassen - diese sog. Wallpapers - da du nie wissen kannst mit welcher Auflösung die Nutzer deiner Seite arbeiten.
    Ausserdem bedenke dazu auch evtl. Ladezeiten, da solch eine Grafik sicher mehr als 50 oder 60 kb gross sein dürfte

    gehen würde es schon - nur bedenke doch die Leute mit ihren Breitbild-Monitoren... in welcher Grösse würdest du solch eine Grafik nun erstellen wollen, damit sie überall ausfüllend zu betrachten ist?


    Ist auch bischen Schnee von gestern, der gerne in Communites bei deren Userbases, Gästebüchern usw. verwendet wird.
    Hat dann oftmals DEN grossen Vorteil, das von der Schrift am Ende janüscht mehr zu lesen ist :wink:


    Schau mal, bei meinen jetzigen Webseiten haben die Backgrounddateien - mit Fliessfarben - gerade mal Maße von vielleicht 10*2000px bei nicht mal 1 kb Grösse. Damit kann man im Internet leben

    Breitbild : Das Hintergrundbild steht in der Mitte (Center) und wirkt transparent zur Hintergrundfarbe. Dann ist halt dort wo kein Bild mehr ist ein weißer Rand, aber der Übergang vom Bild zum Hintergrund ist "weich".
    (Kannst ja mal meine Testseite besuchen)


    Und wenn es gehen würde, könntest du mir vieleicht verraten wie oder unter was ich gucken soll (z.B Google oder so).


    Dann wäre ich erstmal glücklich :D

    Ersteres hattest du vorher nicht geschrieben :D


    Da der Hintergrund nun aber bloss 768px hoch ist, ersteht bei mir auch am unteren Rand ein nicht besonders schöner weisser Rand, wogegen der BG oben bündig anschliesst.
    Da du bei der Grafik die Seitenkanten vignettiert hast, würde ich das an Ober- und Unterkante gleichartig vornehmen

    so sieht's bei mir jetzt jedenfalls recht optimal aus [Blockierte Grafik: http://www.pg-private-line.de/dateien/smily_thumbup.gif]
    musst dir jetzt nur noch was Kluges ausdenken, damit deine Schriften auch noch gut lesbar sein werden.


    Weiss nicht, ob die für <p> vorgegebene Farbe #FF8300 sehr geeignet ist


    ich behalte die Entwicklung der Seite aber gerne mal weiter im Auge... wenn dir daran liegt


    [Blockierte Grafik: http://www.pg-private-line.de/archiv/miniPeterGedamke.jpg]


    PS: solltest du mit Firefox arbeiten, empfehle ich dir mal das Add-on
    WebDeveloper zu installieren
    http://chrispederick.com/work/web-developer/ :wink:

    Falls das so ein Addon ist das der Quellcode überprüft wird, hab ich schon :wink:


    Aber wenn es doch geht, wie geht es :?:


    Und zur Schriftfarbe : Ich hab da so eine Idee, aber erstmal mein Hauptproblem lösen ;)

    nein,
    WebDeveloper überprüft nicht wie ein HTML-Validtor etwa - es hilft nur durch bestimmte Ansichtsmoden bei der Erstellung einer Seite.


    Es lässt auch aus anderen Seiten Quelltext, CSS-Dateien usw. anzeigen...
    die Darstellung bei verschiedenen Auflösungen ist möglich u.v.m.
    - - - - -
    zur speziellen Hinweisanzeige von JavaScript Fehlern eignet sich die FF-Erweiterung Firebug

    Ok, ich hab mir das mal gedownloadet und instaliert : nettes Addon ;)


    Back to topic : Eigentlich wollte ich ja wissen wie das mit dem Hintergrund geht. Krieg ich vieleicht die Lösung oder ein Schlüsselwort nachdem ich suchen kann bitte?

    Ja für mich ist offen was ich schreiben muss damit sich das Bild auf den Bildschirm anpasst. Wenn es zu groß ist wird es kleiner, wenn es zu klein ist wird es größer.


    Weil es gibt ja noch welche die haben 1024x768 Pixel aber das Bild ist 1200x900 Pixel groß :roll:


    Gruß CyberX

    na, da schreibst janüscht extra :)
    dementsprechend wird bei 1024*768 der BG eben nicht vollständig angezeigt - bringt aber auch so immer noch ein sehr gutes Abbild.


    Da du bei deiner Erstellung wohl von 1280*1024 ausgehst, hätte ich diese Datei nun auch in 1280/width erstellt... und nicht 1200px - sofern nicht beidseitig der Whitespace auf Wunsch so sein sollte

    da es dir - bedingt durch die heute teils seltsamsten Auflösungen - nie gelingen wird es allen Ansichten gerecht zu machen,
    solltest du dir vielleicht den Weg überlegen, de ich bei meinen letzten Seiten gegangen bin...


    http://www.mcusers.de/mcusers-partnerseiten.html


    Den gesamten Inhalt in einen zentriert ausgerichteten Container packen, der auf meinen Seiten eine ca-Breite von knapp 800px hat.


    Darin kann ich doch nun walten und schalten wie ich will, und gleich, ob ein User nun eine Auflösung von 2 Meter 50 fährt - er bekommt immer mein vorbestimmtes Eintragsfeld von diesen ca. 800px/zentriert angezeigt.
    Nichts, was sich dort verschieben oder verzerrren könnte - oki :?:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden