Ridimensionare un'immagine di sfondo coi CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Quando si disegnano un sito, e degli elementi di una pagina, per una serie di svariate esigenze potrebbe essere opportuno mostrare a video un'immagine non come immagine vera e propria (intesta nel senso del tag <img> dell'HTML), ma come sfondo di un elemento.

Tuttavia, quest'immagine potrebbe essere in partenza più grande dello spazio / box che possiamo mettere a disposizione e, anche se in questo momento potrebbero sfuggire i motivi, assicuro per esperienza personale che potremmo essere impossibilitati a ridimensionarla ad hoc.

Ad esempio, perchè l'immagine è fisicamente ospitata sul server di un nostro parter editoriale, o per qualsivoglia altro lecito motivo. In ogni caso è necessario imparare a ridimensionare un'immagine di sfondo e, allo scopo, utilizzeremo i CSS3.

Semplifichiamoci la vita ed immaginiamo di avere un box di 150 X 150 pixel, ma che l'immagine che ci interessa sia 500 X 500 pixel... avanzano praticamente 350 pixel quadrati da gestire e, come suddetto, l'unica soluzione a questo scopo è quella di ridimensionare l'immagine di sfondo "al volo".

Vediamo innanzitutto un esempio di cosa otterremmo semplicemente provando ad applicare come sfondo un'immagine più grande del box che la deve contenere:

In realtà, questo è quel che invece vogliamo ottenere:

Potremo ottenere con questo risultato solo lavorando in modo opportuno coi CSS3 che ci mettono a disposizione una serie di proprietà aggiuntive per il comando background, che analizzeremo a breve.

Partiamo dal codice HTML del box:

<div id="immagine"></div>

Semplicemente un elemento a cui assegniamo un ID.

Vediamo quindi il codice CSS di base con cui dimensioniamo il box, applichiamo il bordo (tanto per abbellirlo) ed applichiamo brutalmente l'immagine che ho chiamato sfondo.jpg:

#immagine
{
    width: 150px;
    height: 150px;
    border: solid 1px #000;
    background: url(sfondo.jpg);
}

Questo codice ci mette in condizione di ottenere il risultato di cui al primo dei due screenshot, ossia quello che non ci interessa.

Il comando background-size dei CSS3 è quello che ci permette a tutti gli effetti di ridimensionare un'immagine di sfondo, per cui ampliamo il nostrocodice come di seguito riportato:

#immagine
{
    width: 150px;
    height: 150px;
    border: solid 1px #000;
    background: url(sfondo.jpg);
    background-size: 150px 150px;
    background-repeat: no-repeat;
    background-position: center center;
}

Impostiamo in pixel (o nell'unità di misura che ci interessa) il valore di larghezza ed altezza dell'immagine, così come deve apparire nel nostro box.

Notiamo che abbiamo anche utilizzato anche altri comandi in "base background" che, probabilmente, già ci erano noti: al fine del nostro esempio, trattandosi di un'immagine quadrata, non ci interessano particolarmente, ma possono tornare utile per giocarci qualora l'immagine non sia quadrata, bensì rettangolare, in un verso o nell'altro.

Oppure, tornano utili qualora volessimo effettuare uno zoom sull'immagine di sfondo, come nell'esempio che segue in cui mettiamo maggiormente in evidenza un particolare, come di seguito documentato graficamente:

Segue il codice che ci consente di ottenere questo effetto:

#immagine
{
    width: 150px;
    height: 150px;
    border: solid 1px #000;
    background: url(sfondo.jpg);
    background-size: 250px 250px;
    background-repeat: no-repeat;
    background-position: -80px center;
}

A differenza del precedente codice precedente, l'immagine non è ridimensionata a perfetta misura con il nostro box, ma è più grande; inoltre, impostiamo un posizionamento differente dal caso indicato prima, in modo da impostare l'immagine mostrano i particolari che ci interessano.

TAGS - css3
I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (46.992)

:: Referenze dei fogli di stile Css (41.631)

:: Menu ad effetto mouseover con i Css (38.880)

:: Effetti sui link con i Css (29.121)

:: Testo verticale coi Css (19.698)

:: Angoli smussati in un box coi Css (18.773)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (16.036)

:: Box con effetto ombra con i CSS3 (15.987)

:: Stilizzare i form Html con i Css (15.677)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (15.384)

IN EVIDENZA
DOWNLOAD