Pubblicato il

Realizzare un banner di sfondo cliccabile

Si stanno diffondendo molto i banner di sfondo cliccabili. L’idea di base è avere un’immagine di sfondo che venga visualizzata all’esterno dei “contorni” del nostro sito, e che sia cliccabile.

Dopo aver consultato diverse guide, come sempre sono arrivato a una soluzione che è un mix di varie tecniche e tentativi. L’ho applicata a WordPress ma è valida su qualsiasi sito.

Supponiamo di avere 1000 pixel come larghezza del nostro sito, dovremo preparare un’immagine di sfondo più larga di quei 1000px, ad esempio 2000px, l’altezza è a piacere, ad esempio 1500px.
Lasciamo uno spazio di 100px (sempre modificabile a piacere) in alto, in modo che il banner sia visibile anche sui tablet (dove quasi sicuramente le bande laterali del banner verranno “tagliate” via).

Ecco un esempio di immagine “a ferro di cavallo”:

Banner di sfondo

vedete che viene lasciato vuoto lo spazio che verrà occupato dal sito.

Aggiungiamo nel body del codice html le seguenti righe:

<body>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank"><span>&nbsp;</span></a>

e aggiungiamo al foglio di stile i seguenti parametri:

body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
a#skinlink {
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 display: block;
 z-index: 1;
}
#skinlink span {
 display: none;
}

dove al posto di bannersfondo.jpg dovete mettere il percorso alla vostra immagine di sfondo.

Ulteriore personalizzazione: se volete, potete rendere visibile lo sfondo solo in determinati giorni della settimana, basta racchiudere il codice in questo blocco condizionale:

<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<a id="skinlink" href="http://www.simonezanella.it" target="_blank">
<span>&nbsp;</span></a>
<?
}
?>

dove date(‘w’) restituisce il numero di giorno della settimana corrente, ponendo 0 = Domenica e 6 = Sabato. Nell’esempio, il banner viene mostrato solo il sabato e la domenica.
Per evitare che il sito venga spostato di 100px di margine dall’alto negli altri giorni, si può lasciare nel foglio di stile generale le impostazioni “standard” per il body vostro sito, e aggiungere nell’header, dopo aver richiamato tutti i fogli di stile, il seguente codice:

<head>
...
<?
if ((date('w') == 0) OR (date('w') == 6))
{
?>
<style>
body {
margin:100px auto;
background:url('bannersfondo.jpg');
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
}
</style>
<?
}
?>
</head>