Variabler Webseiten-Hintergrund

Kürzlich stand ich vor der Aufgabe, aus zunächst 7 Hintergrundbildern jeweils zufällig eines auszuwählen.

Das Element, welches den Hintergrund bekommen soll, hat die ID #primary. Nach einiger Zeit bin ich auf folgende Lösung mit JavaScript gekommen:

<script>
function bg_init() {
 var bg_no = Math.floor((Math.random() * 7) + 1);
var myElement = document.querySelector("#primary");
myElement.style.background = 'url(/wp-content/uploads/2017/02/bg_'+bg_no+'.jpg) no-repeat left top'
}
document.addEventListener('DOMContentLoaded', function() {
    bg_init();
}, false);
</script>

Die Einbindung erfolgte durch das WordPress-Plugin “Header Footer Script Adder”.