Sto usando il codice PHP qui sotto per visualizzare un'image di intestazione random each volta che una pagina viene aggiornata. Funziona bene ma ho bisogno di aggiungere una properties; css specifica per la posizione di background ad alcune immagini.
Ad esempio headerimage3.jpg necessita di una posizione di background: 20px e headerimage1.jpg ha bisogno di una posizione di background: 50px.
È ansible utilizzare il codice PHP qui sotto o javascript deve essere utilizzato?
<style type="text/css"> #header-image{background:url("/files/headerimage<?php echo rand(1,4)?>.jpg");background-position:center center;background-size:cover}} </style>
aggiungi intestazione php:
<?php $rnd = rand (1,4); $pos = ($rnd == 1) ? "50px 0;" : ($rnd == 3) ? "20px 0;" : "top left"; ?>
quindi in css:
<style type="text/css"> #header-image { background-image: url("/files/headerimage<?php echo $rnd ?>.jpg"); background-position: <?php echo $pos ?>; background-size: cover; } </style>
quindi un modo è passare una variabile e controllarla per assegnare un nuovo dato:
<?php $rand=rand(1,4); if ($rand==1){$back="50px";} elseif ($rand==3){$back="20px";} else{$back="center";} ?> <style type="text/css"> #header-image{background:url("/files/headerimage<?php echo $rand; ?>.jpg");background-position:<?php echo $back;?> center;background-size:cover}} </style