• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Zufalls Hintergrundbild

F

Franz-Peter

Neues Mitglied
Hallo,

ich habe hier im Forum ein Script gefunden (siehe unten) welches ich gerne in meine Seite einbauen möchte.

Ich würde gerne folgendes noch dazu programmieren:
Das Hintergrundbild soll sich immer über die komplette Seite erstrecken.
D.h. wenn ich ein Bild von 1024x786 auf meinen Server packe und nun ein User kommt der eine viel höhere Auflösung hat als das Bild, dass sich das Bild dennoch an die jeweilige Auflösung anpasst.
(Ganz davon abgesehen das es irgendwann pixelig wird :-) )

Da ich mich nicht wirklich gut mit der Programmierung von JavaScripts auskenne bräuchte ich wohl einen kleinen Tipp, wie ich das Ganze in diesem Script realisieren könnte.

Also width=100% und position= absolute, wären denke ich, Attribute die im Script verbaut werden müssten, aber wo?

Vielleicht kann mir einer von Euch helfen.

Vielen Dank


Code: 
[COLOR=#000000][COLOR=#006600]<[/COLOR][COLOR=#0000CC]script type[/COLOR][COLOR=#006600]=[/COLOR][COLOR=#CC0000]"text/javascript"[/COLOR][COLOR=#006600]>
  [/COLOR][COLOR=#FF9900]//<![CDATA[
      [/COLOR][COLOR=#006600]function [/COLOR][COLOR=#0000CC]bg[/COLOR][COLOR=#006600]()
      {
        [/COLOR][COLOR=#FF9900]//Einstellungen
        [/COLOR][COLOR=#006600]var [/COLOR][COLOR=#0000CC]stamm [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#CC0000]"/images/hintergrund"
        [/COLOR][COLOR=#006600]var [/COLOR][COLOR=#0000CC]endung [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#CC0000]"jpg"
        [/COLOR][COLOR=#006600]var [/COLOR][COLOR=#0000CC]anzahl [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#0000CC]3
       [/COLOR][COLOR=#FF9900]
        //Zufallszahl zwischen 1 und der Bildanzahl
        [/COLOR][COLOR=#006600]var [/COLOR][COLOR=#0000CC]zahl [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#0000CC]Math[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000CC]floor[/COLOR][COLOR=#006600]( [/COLOR][COLOR=#0000CC]1 [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#0000CC]anzahl [/COLOR][COLOR=#006600]* [/COLOR][COLOR=#0000CC]Math[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000CC]random[/COLOR][COLOR=#006600]() )

        [/COLOR][COLOR=#FF9900]//Bildnamen aus Zufallszahl bilden
        [/COLOR][COLOR=#006600]var [/COLOR][COLOR=#0000CC]img [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#0000CC]stamm [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#0000CC]zahl [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#CC0000]"." [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#0000CC]endung

        [/COLOR][COLOR=#FF9900]//Hintergrund setzen
        [/COLOR][COLOR=#0000CC]document[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000CC]getElementsByTagName[/COLOR][COLOR=#006600]([/COLOR][COLOR=#CC0000]'body'[/COLOR][COLOR=#006600])[[/COLOR][COLOR=#0000CC]0[/COLOR][COLOR=#006600]].[/COLOR][COLOR=#0000CC]style[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000CC]backgroundImage [/COLOR][COLOR=#006600]= [/COLOR][COLOR=#CC0000]"url(" [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#0000CC]img [/COLOR][COLOR=#006600]+ [/COLOR][COLOR=#CC0000]")"
    [/COLOR][COLOR=#006600]}
  [/COLOR][COLOR=#FF9900]//]]>
[/COLOR][COLOR=#0000CC]</script>[/COLOR]  [/COLOR]
Code: 
[COLOR=#000000][COLOR=#006600]<[/COLOR][COLOR=#0000CC]body onload[/COLOR][COLOR=#006600]=[/COLOR][COLOR=#CC0000]"bg()"[/COLOR][COLOR=#006600]> 
[/COLOR][/COLOR]
 
Hallo,
das legst du im CSS fest. Ganz einfach ist es trotzdem nicht.

Perfect Full Page Background*Image | CSS-Tricks


Dein JavaScript bleibt im Prinzip davon unberührt..
Zum Vergrößern anklicken....

Vielen Dank für deine schnelle Antwort und für den Tipp.. aber ich habe nun noch eine Frage.

ich habe mir folgende Möglichkeit rausgesucht von der Seite, nur es klappt nicht so wie ich es gerne möchte...


Also... der Script ist klar.


<style> img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } #page-wrap { position: relative; width: 400px; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; } p { font: 15px/2 Georgia, Serif; margin: 0 0 30px 0; text-indent: 40px; } </style>


ich habe aber nun das Problem wenn ich im body-tag background="image/ictures/hintergrund1.jpg" class="bg" sage, dass ich das Bild angezeigt bekomme aber es lässt sich nicht skallieren. Also wenn ich das Bild in 1024x 768 einfüge und ich mit einer höeren Auflösung die HP anschaue wiederholt sich das Bild und das soll es ja gerade nicht. Es soll sich nämlich strecken. Was mache ich falsch??

Gruß
Franz
 
Zeig bitte ein vollständiges Code-Beispiel (inklusive DOCTYPE), das das Problem demonstriert. Ein Link zu einer Demoseite wäre in diesem Fall wohl auch ausreichend.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben