Come mostrare un testo sopra una immagine di sfondo.

Come realizzare un rettangolo colorato con bordo con all'interno un testo e come mostrare un testo sopra a una immagine di sfondo.

Riprendo quei brevi tutorial che potrei definire di appendice o di complemento per gli amministratori di blog che come me non hanno studiato linguaggio di programmazione ma che si sono appassionati alla materia e che vogliono migliorare il proprio sito inserendo delle funzionalità particolari.

Ai meno esperti consiglio di consultare il mio ebook Guida all'HTML e al CSS che può essere scaricato gratuitamente. Abbiamo già visto come posizionare un testo sopra a una immagine con il CSS. Adesso vediamo non solo come si possa fare lo stesso con l'HTML ma anche illustrare un sistema per mostrare un testo con una immagine di sfondo o per inserire una descrizione che si veda sopra alla stessa senza modificarla graficamente.  Dividerò l'articolo in più capitoli per rendere la trattazione ancora più accessibile anche ai neofiti.

RETTANGOLO COLORATO CON UNA SCRITTA AL SUO INTERNO

Partiamo dalla situazione più semplice cioè la realizzazione di un rettangolo con bordo e sfondo colorati con all'interno un testo a piacere. Il codice da usare è il seguente:

<div align="center"><div style="border: #036 solid 2px; width:580px; height:380px; line-height:24px; font-size:20px; font-weight:bold; padding:10px; text-align:justify; background-color:#f00; color:#fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget leo ut justo convallis dignissim malesuada ut diam. Vivamus molestie nulla augue. Vestibulum dui neque, ullamcorper nec nulla sit amet, laoreet mollis risus. Quisque ac metus urna. Curabitur aliquet dolor est, quis fringilla urna accumsan ac. Integer et magna neque. Nulla vitae sem in orci convallis venenatis. Sed volutpat pharetra tellus ac tempus. Donec ut magna ut sapien suscipit faucibus eu in nisi. Curabitur ac vestibulum libero, non eleifend mi. Nunc consequat ligula sed erat aliquet, nec hendrerit urna dictum. Nunc turpis massa, ultricies eget ultricies id, malesuada a massa. Cras et ornare lorem. Donec in nulla id purus porttitor interdum sed sit amet nibh. Nam porttitor vulputate porta. Nam feugiat ac ex non consequat. Duis aliquam dolor ut turpis viverra luctus. Phasellus mi dui, placerat quis ante sed, tempus ultricies ante. Sed tempus lacinia semper. Nulla nibh libero, molestie id justo sit amet, tempor euismod tellus.</div></div>

che se incollato in una pagina o in un articolo in modalità HTML produce questo risultato

Il testo utilizzato per il test è il classico Lorem Ipsum.  I parametri colorati di rosso servono per centrare il rettangolo, per definirne le dimensioni dello stesso, e le dimensioni dei caratteri oltre al colore del testo e al colore dello sfondo ottenuti tramite i codici dei colori.  Il tag padding serve per separare il testo dal bordo che a sua volta viene impostato con il tag border: #036 solid 2px;.  Particolarmente interessanti sono il tag text-align:justify; per giustificare il testo e line-height:24px; per determinare l'interlinea cioè la distanza tra le varie righe.

 

TESTO SOPRA A UNA IMMAGINE DI SFONDO

Il codice precedente può essere adattato per avere come sfondo una immagine che precedentemente dovrà essere caricata su Picasa e di cui dovremo ottenere il link diretto. Il seguente codice

<div align="center"><div style="border: #F00 dotted 2px; width:580px; height:380px; line-height:24px; font-size:20px; font-weight:bold; padding:10px; text-align:justify; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX37IuwVmcGjlld28Urt0ys8u7FCySb6U1pPQxHcxEGbKHvo9JxTo56QeqbOymdqQoNZRnw4Bgu3YoCy_3GOxCmgOpTZ0I6qwqTBQoWp0jINf82tBMaF2eJB34DdQJlrzbI_BFu679Jdk/s600/sushi.jpg) no-repeat; color:#444;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget leo ut justo convallis dignissim malesuada ut diam. Vivamus molestie nulla augue. Vestibulum dui neque, ullamcorper nec nulla sit amet, laoreet mollis risus. Quisque ac metus urna. Curabitur aliquet dolor est, quis fringilla urna accumsan ac. Integer et magna neque. Nulla vitae sem in orci convallis venenatis. Sed volutpat pharetra tellus ac tempus. Donec ut magna ut sapien suscipit faucibus eu in nisi. Curabitur ac vestibulum libero, non eleifend mi. Nunc consequat ligula sed erat aliquet, nec hendrerit urna dictum. Nunc turpis massa, ultricies eget ultricies id, malesuada a massa. Cras et ornare lorem. Donec in nulla id purus porttitor interdum sed sit amet nibh. Nam porttitor vulputate porta. Nam feugiat ac ex non consequat. Duis aliquam dolor ut turpis viverra luctus. Phasellus mi dui, placerat quis ante sed, tempus ultricies ante. Sed tempus lacinia semper. Nulla nibh libero, molestie id justo sit amet, tempor euismod tellus.</div></div>

sempre se incollato in modalità HTML produce questo risultato

Chiaramente le dimensioni della immagine di sfondo debbono essere uguali alle dimensioni del rettangolo. Nonostante questo all'atto della pubblicazione si può avere il testo che esce dall'immagine oppure che sia troppo corto. Ho inserito appositamente il parametro line-height:24px; proprio per questa ragione. Si può mettere per esempio un numero più piccolo di 24 per diminuire lo spazio del testo oppure un numero più grande se abbiamo l'esigenza opposta. Si può anche fare una operazione di cesello utilizzando i decimali come per esempio 23.7px; come interlinea.

 

VISUALIZZARE TITOLO E DESCRIZIONE SOPRA UNA IMMAGINE  

Possiamo anche usare questa tecnica per inserire un titolo o una descrizione sopra a una foto giocando sulla lunghezza del testo, sulla dimensione dei caratteri e sulla interlinea. Questo codice:

<div align="center">
<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX37IuwVmcGjlld28Urt0ys8u7FCySb6U1pPQxHcxEGbKHvo9JxTo56QeqbOymdqQoNZRnw4Bgu3YoCy_3GOxCmgOpTZ0I6qwqTBQoWp0jINf82tBMaF2eJB34DdQJlrzbI_BFu679Jdk/s600/sushi.jpg) no-repeat; border: #F00 double 4px; font-weight: bold; height: 380px; line-height: 180px; width: 580px;">
<span style="color: #006699; font-size: 48px;">SUSHI GIAPPONESE</span>
<br/><span style="color: #996633; font-size: 28px;">Tipico piatto orientale</span></div>
</div>

se incollato in Modalità HTML produce questo interessante risultato

che può essere un modo interessante non solo per presentare ricette ma anche altri tipi di foto. Il trucco è quello di usare il tag <br/> per inserire un salto di riga, di mettere due diverse dimensioni del testo con due diversi colori ma soprattutto di aver inserito il tag line-height: 180px; che produce una interlinea molto spaziosa che ci permette di mostrare la descrizione con una migliore estetica.