Hintergrund auf Bildschirmgrösse zerren



  • Hallo,

    die FAQ ist für den Bereich leider etwas dürftig, deswegen poste ich meine Frage mal direkt ins Forum hier. Und zwar:

    Wie schaffe ich es ein Bild in HTML über den ganzen Bildschirm zu zerren. Ich möchte keine Tapetenwiederholung oder ähnliches. Im meinem Fall ist das Bild etwas kleiner als die aktuelle Auflösung meines Monitors, aber müsste es nicht einen Befehl geben, der besagt, dass das "Hintergrund"-Bild eben gestreckt werden soll, bis es passt?

    Vielen Dank für eure Hilfe



  • Dann müsstest du es wohl in ein extra div packen, und dort dann per img-Tag einbinden mit width und height 100% 🙂



  • Ich sach ma Css ist der einzige Zauber Code der eine positive kostenlose Revolution im Internet ausgelöst hat und dabei von Microsoft stammt.

    Oder gibt es Lizens Gebühren?

    Also nochmal kurz.
    Nutze Css das klappt super.

    m.f.g.



  • Irgendwie scheine ich auf dem Schlauch zu stehen - wie genau meinst du, dass es gehen würde? 🙄



  • Es geht nicht Harle.
    Nicht mit CSS (es sei denn, M$ hat da was eigenes für 🙄)



  • @flenders,
    ich nehme mal an, dass er dein Vorschlag verwendet hat. Mit CSS ist es nicht möglich den Hintergrund zu verzerren...lediglich kacheln ist möglich.



  • Hmm, also bis jetzt hab ich das noch nicht hinbekommen. Bei mir taucht immer wieder das ungewollte Tapetenverhalten auf.

    Ich hab das jetzt mal so probiert:

    <div style="position:absolute; width="100" height="100">
    <body style="background-image:url(hintergrund.jpg)"></div>
    

    Hat leider nicht gefunzt. Hat jmd. wohl für mich nen kleinen Code-Schnipsel, wie ich das denn bewerkstelligen kann?

    Danke



  • NewProggie schrieb:

    Ich hab das jetzt mal so probiert:

    <div style="position:absolute; width="100" height="100">
    <body style="background-image:url(hintergrund.jpg)"></div>
    

    Das sieht ja grausam aus 😮

    Ich hatte das irgendwie so gedacht:

    <body style="width:100%; height:100%; padding:0px; margin:0px;">
     <div style="position:absolute; z-index:1; width:100%; height:100%;"><img src="deinbild.jpg" style="width:100%; height:100%;" /></div>
     <div style="position:relative; z-index:2;">
      Hier dein normaler Inhalt
     </div>
    </body>
    


  • Hmm.. okay gut so is das Möglch.. zwar ein kleiner Cheat weils nur indirekt Hintergrund bild is aber okay das läst sich verkraften 😉

    Hier eine kleine änderung

    <body style="width:100%; height:100%; padding:0px; margin:0px;"> 
     <div style="position:absolute; z-index:1; width:100%; height:100%;"><img src="BILD.JPG" style="width:100%; height:100%;" /></div> 
     <div style="position:relative; z-index:2; width: 100%; height:100%;"> 
      Hier dein normaler Inhalt 
     </div> 
    </body>
    

    Dadurch, das das 2te div nun acuh den ganzen Bildschirm ausfüllt, kommt man auch nichtmehr an das Bild heran.
    Opera user kennen das... Bildanklicken und gedrückt halten -> Maus ziehen, und man zieht das Bild weg(Halb durchsichtig) und öffnet das dann.
    Is recht blöd - bei grossen Bildern ausserdem viel zu langsam 😉
    Ausserdem wollen wir ja nicht, das es für alle Benutzer im Vordergrund steht.

    Und dann halt alles andere (Tabellen, links etc) innerhalb dieses DIVs^^

    byebye Verno



  • so, jetzt funzt es.

    Vielen Dank 😃



  • Hmm, ich war wohl etwas zu voreilig...

    Wenn ich jetzt also folgendes mache

    <body style="width:100%; height:100%; padding:0px; margin:0px;"> 
     <div style="position:absolute; z-index:1; width:100%; height:100%;"><img src="BILD.JPG" style="width:100%; height:100%;" /></div> 
     <div style="position:relative; z-index:2; width: 100%; height:100%;"> 
      Hier dein normaler Inhalt 
     </div> 
    </body>
    

    und dann z.B. eine Tabelle einfüge und positioniere, dann verschiebt sich mein ganzer div-Bereich so, dass ich über meine Website hinaus rechts und runter scrollen kann (Hab dann weißen Hintergrund an der Stelle. Also ungefähr so:

    -----------------------
    |             |       |
    | Website     |       |Bildschirm
    |             |       |
    |             |       |
    |             |       |
    |             |       |
    |             |       |
    --------------        |
    |                     |
    |                     |
    -----------------------
    

    Ich hab jetzt die letzten 2 Std. rumprobiert, hab's aber nicht hinbekommen. Wäre dankbar für einen Hinweis



  • Poste doch mal deinen genauen Code 🙄


Log in to reply