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>

Pubblicato da Simone Zanella

Ing. Informatico (sempre), Prof. di Mate-Informatica-Elettronica (quando capita), sciatore (in inverno), Sampdoriano (quanto basta).

Unisciti alla discussione

4 commenti

    1. In genere una larghezza per il corpo centrale la si da anche sui layout responsive, in un caso in cui il banner di sfondo sia fondamentale si può pensare di impostarla. Certamente restringendo poi gli spazi quando si vede il sito su tablet o smartphone è difficiel riuscire a sfruttare quello spazio, meglio giocare di media screen e visualizzare un banner alternativo in un’altra zona dello schermo (magari in cima prima del corpo del sito)

  1. Ciao Simone, perdona la mia ingnoranza e sicuramente dirò una castroneria. Quando dici: “Aggiungiamo nel body del codice html le seguenti righe:”, esattamente dove si trova il file che contiene (conterrà) queste istruzioni? Come si chiama? Grazie mille

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza cookie tecnici per il suo funzionamento. Cliccando su Accetta, scorrendo la pagina, navigando questo sito ne acconsenti l'uso e la tua scelta sarà memorizzata per 12 mesi. I contenuti presenti rappresentano l'opinione personale dell'autore, le guide e gli appunti sono da considerarsi indicativi e si declina ogni responsabilità derivante dall'applicazione delle indicazioni contenuti in essi. Maggiori informazioni sulla privacy e sui cookie (informativa estesa)

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi