HTML JavaScript Hintergrund?
Hi,
Ich wollte fragen ob mir jemand hier im Forum helfen kann.
Also ich möchte machen das wenn man die Seite reloaded das man immer ein neues Hintergrundbild hat (im Body + link kompatible)
MfG
2 Antworten
Du kannst das src-Attribut des img-Tag auf eine zufällige URL aus einem Array ändern: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
Wenn du dies mit CSS gemacht hast kannst du mit hintrergrund.style.backgroundImage = "..."; Auch den CSS Hintergrund ändern.
Ich würde einfach mit PHP ein Zufallsbild ausm nem array wählen.
<?php
$bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>
<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>
die PHP variante kann die auch in nem anderem php script nutzen oder muss das genau auf der seite sein?
Das Ding ist halt, dass du in einer css Datei kein PHP verwenden kannst. Ich würde dass in den header packen.
praktisch kann man auch php so schreiben das es als css datei ausgegeben wird . alledfings hat man dann meist cache probnlem
und die PHP / JQuery variante klappen nd
https://www.webmasterpro.de/coding/article/php-in-css-dss-dynamic-style-sheet.html
wenn du es als CSS Datei ausgabe haben willst. eher nicht zu empfehlen
die jquery ist einfach nur javascript , die brauch kein php
möchte ich auch nicht aber beide skripts klappen nicht (bei mir)
Ja ich hab das auch nur kopiert. Der CSS Teil ist ja quasi auskommentiert.
Und bei dem jQuery musst du natürlich jQuery auch laden. Allerdings ist das Quatsch, reines JS würde es tun.
var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg'];
document.querySelector('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});
hast du auch die pfade zu deinen bildern ?? also sind die im Ordner images/
url(images/'
funktionieren tut es jedenfalls
https://jsfiddle.net/23vurqhy/
wie gesagt ich habe geschrieben das ich links nutze
dann darfst du die bilder wohl nicht ecter verwenden . scheck mal direkt im browser ... sind die hinter einem login ?
weil das beispiel funktioniert, hab jetzt immer das selbe bild genommen . ansonstenhast du wohl kein javascript aktiviert oder so
Dennoch fände ich die PHP Variante eleganter. Wie gesagt der CSS Teil ist mit <!-- auskommentiert und hat somit keine Funktion.
es klappt mit der PHP variante ja leider auch nicht..
stimme ich bedingt zu , den eingebetteter CSS verhalt sich etwas anders : siehe https://little-boxes.de/lb1/5.8-styles-koennen-an-drei-verschiedenen-stellen-definiert-werden.html wer gewinnt wann ;)
habs geupdadet https://pastebin.com/iFnjupJv
ja toll , da fehlt irgendwie noch die echo ausgabe vom style ?
$i = rand(0, count($bg)-1);
$selectedBg = "$bg[$i]";
?>
</style>
es wäre cool wen du etwas grundlagen lernen würdest .
also auch verstehen tust was du da mit copy und paste anrichtest, sonst wird dein ganzes system bald so löchrig .
Habs mal grade selbst auf n Server geladen. Klappt doch prima. Aber in meinem ersten Bsp. fehlten auch noch '' . Man sollte nie ungelesenen Code copy pasten. Sorry für die ganze Verwirrung. Klappt's denn jetzt bei dir?
Ja aber was ich mich frage wie kann ich den Hintergrund blurren ohne das der text betroffen ist
Jap,. Wenn du dieses Problem nicht allein gelöst bekommst, solltest du dich erstmal mit den basics beschäftigen, oder dir ein neues Hobby suchen ;)
ich habe es nach 2 min behoben war nur zu dumm
Hier eine jQuery-Variante: