Corso di CSS: come inserire uno sfondo cliccabile

Continuiamo a parlare di CSS, uno dei linguaggi fondamentali di un web developer. Questa volta cerchiamo di capire come inserire uno sfondo cliccabile.

Saper “programmare” in CSS è il primo passo fondamentale per la creazione di un sito web di successo. Il CSS infatti è il linguaggio che permette di modificare l’aspetto grafico di un sito web, dall’header alla barra laterale e così via. Saper fare uso di tutte le istruzioni base più importanti offre la possibilità, sin da subito, di creare una pagina web ben organizzata ed efficace. Successivamente si può iniziare a pensare al guadagno vero e proprio del sito. Su questo argomento abbiamo già scritto un articolo in cui parliamo dei metodi di guadagno di un sito web. Un metodo indiretto è il posizionamento di uno sfondo cliccabile, che magari rimanda ad un link di acquisto, dal quale potete guadagnare con ogni vendita. La tecnica dello sfondo cliccabile viene utilizzata da tutte le più grandi testate giornalistiche, che offrono il proprio spazio per fare pubblicità ad un marchio, in cambio di un prodotto o anche di un compenso. Rendere uno sfondo cliccabile non è così semplice come sembra, dato che di default uno sfondo non può essere collegato ad un link esterno. Però è possibile sfruttare alcune tecniche ed escamotage per rendere lo sfondo una vera e propria vetrina pubblicitaria.

Metodo 1: utilizzare la funzione background

Il primo metodo per poter inserire uno sfondo cliccabile è quello di sfruttare il tag background del linguaggio CSS, che serve a gestire tutte le caratteristiche degli sfondi di ogni elemento del sito, come titoli, etichette, o loghi. Attraverso la parola background possiamo inserire tutte le caratteristiche di un dato elemento in una singola dichiarazione. Ad esempio:

body {

background: url("image.jpg") no-repeat fixed center;

}

In queste poche stringhe abbiamo assegnato al body, ovvero il corpo della pagina, uno sfondo caratterizzato dall’immagine rinominata image.jpg, aggiungendo alcune caratteristiche aggiuntive come la non ripetizione nel caso l’immagine sia troppo piccola (no-repeat), il fissaggio dell’immagine così che non scorra insieme alla pagina (fixed) e la posizione (center). Se invece vogliamo applicare una singola proprietà ad un dato elemento, possiamo utilizzare delle variabili più specifiche. Vi lasciamo all’elenco di quelle più importanti:

  • background-image: assegna una specifica immagine come sfondo.
  • background-size: definisce la dimensione in pixel dello sfondo.
  • background-attachment: permette di dichiarare se lo sfondo scorre insieme alla pagina o meno.
  • background-color: assegna un colore predefinito allo sfondo. E’ possibile impostare un valore standard come black, white o blue oppure un codice esadecimale (per chi utilizza Photoshop saprà di cosa parliamo).
  • background-position: regola la posizione dell’immagine rispetto al bordo superiore della pagina.
  • background-repeat: modifica la ripetizione dell’immagine nel caso sia più piccola dello spazio nel quale viene inserita.

Dopo questa breve premessa, vediamo come poter inserire uno sfondo cliccabile unendo il CSS e l’HTML.

Impostare lo sfondo

Per prima cosa bisogna individuare l’elemento della pagina alla quale corrisponde il corpo. Solitamente viene indicato con le parole body o page, ma potrebbe avere anche una nomenclatura più precisa. Per sapere esattamente quale sia l’elemento, ci basta aprire l’homepage del nostro sito web, cliccare sullo sfondo con il tasto destro e selezionare Ispeziona (su Google Chrome, con altri browser potrebbe chiamarsi diversamente). Si aprirà così la console del browser, dalla quale potrete individuare facilmente l’elemento HTML a cui fa riferimento il corpo della pagina.

Fatto ciò è il momento di applicare uno sfondo cliccabile a tale elemento. Dunque mettiamo mano al CSS e andiamo a modificare il file style.css, che si può trovare nell’editor di WordPress. In alternativa potete anche usare la scheda Personalizza>Modifica CSS, per evitare di cambiare direttamente il codice del tema e cambiarlo rapidamente in caso di problemi. Impostiamo il codice in questo modo:

#page {

background: url("/background.jpg") fixed no-repeat;
background:cover;

}

Ovviamente questo è solamente il codice base per impostare un’immagine come sfondo. Dovete valutare voi le eventuali altre misure da sistemare affinché l’immagine venga visualizzata correttamente, come il padding o il border. Per questo vi rimandiamo al primo articolo sul CSS. Nel codice abbiamo incluso un’istruzione abbastanza impostante, ovvero background:cover;. Con questa impostazione facciamo in modo che lo sfondo cliccabile venga ridimensionato automaticamente ogni qualvolta si cambia la dimensione della pagina, mantenendo una certa simmetria tra lo sfondo e il contenuto del sito, evitando che magari l’immagine vada fuori misura o che si nasconda dietro gli articoli.

Aggiungere il link allo sfondo

Una volta modificato il CSS, è il momento di rendere cliccabile lo sfondo, creando un tag div con lo stesso attributo (id) di quello modificato precedentemente e agendo direttamente sul body. Quindi entriamo, sempre dall’Editor di WordPress, nel file header.php. Qui bisogna individuare la parte di codice che definisce l’inizio del body ed inserire le seguenti stringhe:

<a href="www.urlsito.it">
<div id="page">
  </div>

Con queste poche righe indichiamo semplicemente che l’elemento page deve reindirizzare al link che noi gli forniamo. Perciò ogni qualvolta un utente visitatore cliccherà sull’immagine di sfondo, verrà reindirizzato all’URL definito nel codice.

Noi sinceramente preferiamo utilizzare questo metodo, anche se un po’ più lungo rispetto al secondo, che vedremo tra poco, poiché permette di ottimizzare al meglio l’immagine e il suo posizionamento, agendo sul CSS.

Metodo 2: agire direttamente sull’header

Un secondo metodo, più sbrigativo, è utile per chi vuole solamente inserire uno sfondo cliccabile nella testata (header) del sito. In questo caso la procedura richiede sempre la creazione di un tag div con relativo attributo. Ma stavolta l’elemento da modificare sarà proprio l’header. Dunque vediamo come si implementa:

<div id="header">
<a href="https://www.urlsito.it">
  <img src="https://www.nomesito.it/wp-content/uploads/2018/06/banner.jpg" alt="<?php bloginfo('name'); ?>" />
    </a>
</div>

Stavolta abbiamo inserito il riferimento al link e all’immagine direttamente nel tag div, senza andare a modificare nulla di CSS. Se volete potete anche inserire delle linee di codice in CSS direttamente nel file header.php, scrivendole come:

<style>

#header{

background:cover;
background-attachment:fixed;

}
</style>

Ovviamente non va messo il riferimento all’immagine, altrimenti ne verranno visualizzate due copie.

Uno dei problemi di questo metodo è che se l’immagine è troppo lunga, non andrà a nascondersi dietro i contenuti del sito, ma si creerà un enorme spazio tra lo sfondo e i contenuti. Dunque dovrete modificare le misure della foto secondo le vostre esigenze, ritagliandola opportunamente.

Entrambi i metodi hanno i loro pro e contro. Dovrete valutare la scelta a seconda di come volete impostare lo sfondo cliccabile. Speriamo che questo articolo vi abbia aiutato in questa operazione, dato non è proprio così intuitiva, visto che lo sfondo non si potrebbe teoricamente impostare come cliccabile.