Frage bezüglich Hintergrundbild in Webseite

  • Hallo !


    Bin neu hier und habe eine Frage und die Hoffnung auf eine Antwort.
    Ich möchte eine eigene Webseite erstellen.
    Ich habe eine konkrete Vorstellung und habe damit allerdings ein Problem.
    Folgendes ist wichtig bevor ich meine Webseite mit durchsichtigen Divs ... welche gefülllt mit Texten sein sollen ... bestücke.


    Ich möchte ein Hintergrundbild haben.
    Das ist grundsätzlich auch erstmal kein Problem.
    Allerdings habe ich genaue Vorstellungen und kann diese nicht realisieren.


    Es soll sich folgendermassen verhalten:


    Es soll zentriert dargestellt werden.
    Es soll das Seitenverhältnis behalten.
    Sprich wenn man das Browserfenster verschiebt soll es nicht verzerren und immer seine Form behalten.
    Wenn man das Browserfenster in der Breite schmaler schiebt soll es kleiner werden aber ab einem bestimmten Punkt sollen die Seiten des Bildes rechts und links aus dem Browserfenster sozusagen rausfahren.
    Das gilt auch für das Verhalten des Hintergrundbildes in der Höhe wenn das Browserfenster verkleinert wird.
    Es sollen keine Ränder oder ähnliches da sein rings um das Hintergrundbild.
    Es soll also so aussehen als wenn das Browserfenster ein Bild darstellt im Hintergrund.
    Macht man das Fenster des Browsers kleiner auf dem Desktop soll das Aspect Ratio gleich bleiben und das Bild etwas kleiner werden bis zu einem bestimmten Punkt und dann teilweise links und rechts und oben und unten aus dem Browserfenster verschwinden.
    Zumindest soll es so wirken.


    Wie kann ich das mit welchen Quellcode anstellen???


    Ich hoffe das mir jemand ein Beispiel hier postet.
    Meine HTML-Seite sieht bisher blank aus ... nämlich folgendermassen:


    Die CSS-Datei sieht so aus :


    Also wie man sieht bin ich am Anfang der Arbeit.
    Ich habe schon Ideen die ich auch realisieren könnte dank der Tutorials auf der HTML-Seminar-de-Seite.
    Aber dort finde ich bisher keine Hilfe bezüglich des Webseiten-Hintergrundes.
    Zumindest keine die das ermöglicht was ich mir vorstelle.
    Nur ein Beispiel ist dort zu sehen welches meinen Vorstellungen optisch nahekommt.
    Da ist es aber so das sich das Hintergrundbild immer verzerrt und das Aspect Ratio verliert wenn man das Browserfenster verkleinert.
    Hier der Link:


    http://www.html-seminar.de/bei…intergrund_aufspannen.htm


    Ich möchte aber das es zwar grundsätzlich so aussieht aber das Aspect Ratio behält und beim verkleinern des Browserfensters kleiner wird und irgendwann unten und seitlich rausfährt so dass es immer mittig dargestellt wird auch im verkleinertwen Browserfenster auf dem Desktop.
    Ich hoffe es ist aus meiner Erklärung klar geworden was ich meine.


    Ich hoffe auf baldige Antwort.
    Vor allem auf eine einfache Antwort.
    Mir wäre ein Post recht der den oben gelisteten Quellcode erweitert mit den nötigen Ergänzungen.
    Das Bild das im Hintergrund eingefügt werden soll trägt den Titel "website_background.jpg".
    Es ist von den Maßen her 1920x1080 wenn das wichtig sein sollte.
    Die Webseite soll auch optimiert werden für 1920x1080 er Auflösung.
    Dennoch sollte man das Browserfenster verkleinern können in der Auflösung ohne das mein Hintergrundbild verzerrt oder nicht mehr korrekt sichtbar dargestellt wird.


    Wenn das Problem gelöst ist und ich das habe was ich mir vorstelle kann ich endlich anfangen.
    Der Rest der mir so vorschwebt sollte alleine schaffbar sein.
    Die Tutorials sind sehr gut hier auf HTML-Seminar.de.
    Aber bevor ich das Hintergrundbild nicht realisiert habe macht es einfach keinen Spass weiterzumachen.
    Wenn es zu Beginn schon hapert am Hintergrundbild ist das echt frusstrierend.


    Ich bin dankbar für jeden helfenden Post.
    Am liebsten mit ergänzten Quellcode.



    Gruss Rongkongcoma

  • CSS
    html {
    background-image: url(website_background.jpg);
    background-size: cover;
    }


    Anmerkung: es empfiehlt sich nicht, fuer Mobilgeraete ein 1920x1080 Bild zu laden. Man kann das Bild z.B. in drei verschiedenen Aufloesungen zur Verfuegung stellen und dann via media queries das entsprechende laden.

  • Danke sehr "lauras" .... aber ein Problem gibts noch .... wenn ich das Browserfenster kleiner mache wird das Bild unendlich dargestellt nach unten hin ... sprich untereinander ist es dann mehrere Male da.
    Wie bekommt man das in den Griff?
    Ansonsten soweit super ... Danke.

  • CSS
    background-repeat: no-repeat;


    Kleiner Tipp am Rande: wir sind zwar ein Forum hauptsaechlich fuer Anfaenger und beantworten solche Fragen gerne, aber es empfiehlt sich, frueh zu lernen, wie man solche Informationen selbststaendig ergooglet - das ist in 99% der Faelle schneller, als auf eine Antwort im Forum zu warten ;)

  • Danke "lauras" .... aber auch das hat wieder ein Problem.
    Es wird dann zwar nicht mehr unendlich dargestellt .... aber ein weisser streifen sprich der Hintergrund hinter dem Hintergrundbild wird dann dargestellt.
    Aber ich habe etwas im Netz rumgesucht und zu Deinem Quellcode etwas ergänzt und folgende Lösung gefunden :

    CSS
    html, body 
    {
            background: url(background.jpg) no-repeat center center fixed;
            background-size: cover;
    }


    Damit habe ich dann das was ich wollte.
    Die Frage ist nur ... was heisst das für mich?
    Es ist schön eine Lösung zu haben ... aber es wäre noch schöner wenn ich verstehen würde was da geschrieben steht.
    Ausserdem .... wenn ich mit Webocton Sriptly arbeite oder im Brwoser den Quellcode sehe ... wird mir das "background-size: cover" zum Beispiel als rot dargestellt.
    Wieso?
    Ist das falsch?
    Und wieso kennt Webocton Scriptly diesen Befehl offenbar nicht??
    Wenn ich beispielsweise eintippe <bac ..... dann gibt er mir gleich Optionen wie <background> oder ähnliches in der Liste.
    Background-size ist jedoch nicht vorhanden.
    Die Frage ist wieso???
    Warum wird einiges als grün und einiges als blau dargestellt und weniges als rot????
    Sehr verwirrend.
    Und wofür steht nach no-repeat ... center center fixed?
    Vielleicht hast Du ja eine anfängerfreundliche Erklärung.
    Wär cool.
    Das Problem ist jedenfalls gelöst.
    Danke also für den Denk- und Suchanstoss.


    Gruss Rongkongcoma

  • background ist in diesem Fall eine verkuerzte Schreibweise fuer mehrere background-* Eigenschaften.
    In deinem Fall:

    CSS
    html
    {
            background-image: url(background.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
    }


    background-position definiert, wo dein Bild platziert wird - in diesem Fall horizontal und vertikal zentriert (was du eventuell gar nicht willst?).
    background-attachment: fixed; definiert das Bild als fixiert im viewport, also nicht mitscrollend.
    Eine doppelte Definition des Hintergrundbildes fuer html und body ist nicht noetig.


    Die einzelnen Punkte werden z.B. hier ausfuehrlich erklaert.


    In Scriptly werden manche Sachen deshalb rot dargestellt, weil Scriptly seit langem veraltet ist und Eigenschaften aus aktuellen HTML-/CSS-Spezifikationen noch nicht kennt.
    Zum Lernen ist Scriptly ok wenn du damit leben kannst, aber spaetestens wenn du ernsthaft anfaengst dich mit Webdesign zu beschaeftigen solltest du einen anderen Editor benutzen.

  • Dann für die Antwort "lauras".
    Die letzte Quellcode-Auflistung gefällt mir am besten und wird prompt übernommen.
    Übersichtlich wie ich mir das vorstelle .... schön geordnet und erklärend.


    Das mit dem Webocton Srcriptly ist mir nicht bewusst gewesen.
    Welche anderen kann man denn nehmen welche kostenlos sind?
    Das meisste im Netz ist mit einem Obulus verbunden oder optisch nicht so ansprechend .... oder das Gegenteil .... zu vollgestopft mit Infos und verwirrend für Anfänger und/oder optisch nicht ansprechend.
    Habe selber nur Webocton Scriptly und den NVU-Webeditor.
    Für bessere Editoren habe ich jedoch ein offenes Ohr.


    Danke jedenfalls für die Lösung des Problems. :)

  • Nun ja, zum Üben der Befehle eignet sich die ausführliche Variante besser, allerdings ist es zu empfehlen, möglichst früh die Kurzschreibweise zu lernen, da sie einfach sehr viel effizienter und schlanker ist, vor allem auf großen Seiten mit viel CSS Code.


    Zur Editorfrage gibts hier im Forum bereits die Diskussion Welchen Editor nutzt ihr?. Kurz: Zur Zeit sind Notepad++ oder Sublime Text die zwei zu empfehlenden Editoren. Beide gratis voll nutzbar, beide mit sehr vielen Erweiterungs-/Anpassungsmöglichkeiten und eingebauten Helfergadgets (Syntax Highlighting, Code Completition, ...)

  • Habe Sublime Text 2 probiert ... sieht nett und bunt aus.
    Könnte Scriptly für mich ersetzen.
    Danke dafür.
    Leider hilft mir das bei meinem Post bezüglich des Problems mit dem Intergrundvideo nicht weiter. :-/

Jetzt mitmachen!

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