Zufälliges HIntergrundbild

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

21:56, 31.3.2018

Hi,
ich wollte eine Website machen, wo sich das Hintergrundbild bei jedem Aufruf zufällig ändert.
Bin im Internet auf diese Lösung gestoßen:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf=8">

        <style type="text/css">
            #posts {
                width: 90%;
                height: 700px;
                margin: auto
            }
        </style>

    </head>
    <body onload="return ran_col()">
        <div id="posts">
        </div>
        <script type="text/javascript">
            function ran_col() { //function name
                var color = '#'; // hexadecimal starting symbol
                var letters = ['000000','FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF','C0C0C0']; //Set your colors here
                color += letters[Math.floor(Math.random() * letters.length)];
                document.getElementById('posts').style.background = color; // Setting the random color on your div element.
            }
        </script>
    </body>
</html>

Zu dem Code: Klar, es ist alles in einem div der posts heißt etc, aber das kann man ja später ändern.
Wenn ich bei dem css von posts z.B statt 700px 100% verwende, funktioniert es nicht.

Außerdem muss man für diese Lösung die Farben im Vorraus angeben, ich fände es aber toll, wenn der die Farben zufällig auswählt. (Habe gedacht an 3 Variablen (R,G,B) mit einem zufallswert von 0-255).

Könnt ihr mir damit helfen?

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
~~h***********r~~
22:09, 31.3.2018
Hm, das ganze mit JS zu lösen ist nicht unbedingt so schön. Mach es doch lieber so, dass du eine .php Datei als Stylesheet einsetzt wo du den jeweiligen Wert durch eine Zufallszahl setzen lässt. Also als Dynamic Stylesheet.
Also so ala
index.html
```
<link rel="stylesheet" href="css/random.css.php">
```
und dann halt in random.css.php deinen zufälligen Code.
Da kannst dann aus einem Array den Wert background-image setzen lassen oder background-color mit Zahlen.
Also so was z.bsp für die Farbe:
```
<?php
  header('Content-type: text/css');
?>

body {
  color: #000000;

<?php
$rr = rand(0,255);
$rg = rand(0,255);
$rb = rand(0,255);
echo "background-color: rgb( $rr, $rg, $rb );";
?>
}

.ibimseinsnormaleclass{
 background-color: #ffggaa;
}
```
Und ob das nun der body oder nen Div ist oder wie groß es ist ist egal.

Beitrag zuletzt geändert: 31.3.2018 22:22:12 von horstexplorer
Autor dieses Themas
darvin

darvin hat kostenlosen Webspace.
23:38, 31.3.2018
Sorry, ich bin leider zu inkompetent, um deinen Code zu verstehen.
Also, ich habe es so verstanden:
```
<link rel="stylesheet" href="css/random.css.php">
```
wir ersetzt durch
```
background-color: rgb( $rr, $rg, $rb );
```
.
Stimmt das so ?
~~h***********r~~

23:42, 31.3.2018
Nein.
Du schreibst gerade deinen CSS Code direkt in die HTML Datei rein.

<style type="text/css">
#posts {
width: 90%;
height: 700px;
margin: auto
}
</style>

Das löst man so normalerweise nicht, da das recht unsauber ist. Da lagert man das ganze in .CSS Dateien aus welche man wie oben beschrieben einbindet. Ich binde allerdings eine .PhP Script Datei ein, welche sich als CSS aus gibt. Damit kann man super wechselnde CSS Inhalte erstellen.

Mit anderen Worten, dein js Code und der CSS Code fliegt raus aus dem Dokument. Damit arbeitet man eher nicht an dieser Stelle. Dein Code wandert angepasst in die .css.php rein bzw du passt die an, welche dann in der .html verlinkt wird.

Beitrag zuletzt geändert: 31.3.2018 23:46:56 von horstexplorer
Autor dieses Themas
darvin

darvin hat kostenlosen Webspace.
23:47, 31.3.2018
Den Code, den du geschickt hast habe ich bereits entfernt. Der war nur von einer Website, die das so gemacht hat.

Also:
Was genau muss in die HTML(bzw. php) Datei?
Momentan sieht sie noch so aus (leer):
```
<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body style="background-color:powderblue;">
    </body>
</html>
```
~~h***********r~~
23:57, 31.3.2018
An sich hast du eine leere .HTML Datei, Content, Meta etc kannst ja selber erstellen. Dann binden wir im Head den DSS ein. Sieht dann ungefähr so aus:
```
<!DOCTYPE html>
<html lang="en">
    <head>
    <link rel="stylesheet" href="random.css.php">
    </head>
    <body>
    </body>
</html>
```
Nun erstellt die Datei random.css.php . Kannst die auch anders nennen Hauptsache .PhP am Ende.
Diese muss sich erst als Stylesheet ausgeben. Dafür fügst zu erst folgende Zeilen in das Dokument ein.
```
<?php
  header('Content-type: text/css');
?>
```
Danach kannst du alles rein packen wie du es aus normalen .css Dateien kennst.
Willst du nun den Body bearbeiten kommt dann halt
```
body{
// Deine CSS Definitionen.
}
```
Nun möchtest du den Wert für die Eigenschaft background-color per PhP setzen. Dafür muss PhP diese mit Echo an der richtigen Stelle wiedergeben. Dafür setzt du den Code innerhalb der klammern von Body{} ein.
```
<?php
$rr = rand(0,255);
$rg = rand(0,255);
$rb = rand(0,255);
echo "background-color: rgb( $rr, $rg, $rb );";
?>
```
Wenn du nun die Datei .CSS.php o.a. im Browser aufrufen solltest sieht sie aus wie jede CSS Datei nur das sich die Werte bei jedem reloaded ändern.
Autor dieses Themas
darvin

darvin hat kostenlosen Webspace.

0:04, 1.4.2018
JAA! Es funktioniert!
Vielen Dank horstexplorer.
Habe jetzt mal nochmal gegooglet was die ganzen Begriffe bedeuten und habe es jetzt verstanden.

Und ab ans nächste Sinnlose Projekt, um die Websprachen zu lernen ;)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city