12 css3 background

Pubblicato il di

vediamo i nuovi attributi css3 per i background. Abbiamo la seguente pagina html:

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 background</title>
    <link rel="stylesheet" href="12.css" type="text/css">
</head>
<body>
</body>
</html>

Vogliamo applicare una grossa immagine come sfondo, ecco il css

body {background: url("koala.jpg") center center fixed no-repeat;}

Essendo l’immagine molto grande, possiamo utilizzare il nuovo attributo

background-size

Una possibilità è quella di attribuire dei valori in pixel:

background-size: 1280px 720px ;

In questo caso devo rispettare le proporzioni dell’immagine tra altezza e larghezza, per non deformarla. Questo metodo può essere interessante per esempio per inserire più immagini affiancate alle quali attribuisco le dimensioni.

cover

background-size: cover;

Cover è un attributo che va a coprire l’intera area interessata, ridimensionando l’immagine fino a tal punto, mantenendo intatte le proporzioni. Ovviamente per coprire e mantenere le proporzioni, ridimensionando la finestra del browser, alcune parti dell’immagine saranno tagliate.

contain

background-size: contain;

a differenza del cover, l’immagine viene visualizzata tutta, nella sua interezza. Vengono mantenute le proporzioni e la scalarità in base al dimensionamento della finestra, però se le proporzioni del browser non rispettano le dimensioni dell’immagine verranno inserite proporzionalmente delle bande di spazi laterali (sopra e sotto, destra e sinistra). Il concetto è immagine più grande possibile, che mantenga le proporzioni e che si veda tutta. Per il contain è possibile selezionare un colore di sfondo per le bande, inserendolo prima.

background: #bbbbbb url("koala.jpg") center center fixed no-repeat;
background-size: contain;

repeat , position

body {
    background-image: url("koala.jpg"), url("canyon.jpg");
    background-size: 100px 120px , 100px 150px;
    background-repeat: repeat-x, repeat-y;
    background-position: left top, left bottom;
}

Ho inserito due immagini, le ho dimensionate, la prima l’ho ripetuta sull’asse x , la seconda sulle y.  La prima l’ho posizionata a sinistra in alto, la seconda a sinistra in basso.

Aggiungiamo un div nel body

<div> Prova con sfondo CSS3 di un DIV</div>

e diamogli un po’ di stile

div {
    border: 10px dashed blue; padding: 50px;
    position: fixed; left: 110px; top: 130px;
    width: 1200px; height: 480px; color: black;
    font-weight: bold; font-size: 80px;
    background-color: yellow;
    background-clip: border-box;
}

l’ultima proprietà è l’area di clip

background-clip: border-box;

border-box è la proprietà di default , selezionata se non viene indicata, e indica che lo sfondo arriva fino a sotto il bordo. In questo esempio si nota bene perché il bordo è tratteggiato di colore blu, mentre lo sfondo è giallo in tinta unita e tra un trattino e l’altro del bordo si può notare lo sfondo giallo. Altra proprietà è

background-clip: padding-box;

Lo sfondo si ferma al limite estremo del bordo, senza andargli sotto.

Il terzo valore è

background-clip: content-box;

Lo sfondo ricopre solo l’area del contenuto, quindi non va sul padding, nel nostro caso si nota bene, perché abbiamo un padding di 50 pixel.

Vediamo un’immagine :

div {
    border: 10px dashed blue; padding: 50px;
    position: fixed; left: 110px; top: 130px;
    width: 1200px; height: 480px; color: yellow;
    font-weight: bold; font-size: 80px;
    background: url("koala.jpg") center center no-repeat;
    background-clip: content-box; background-size: cover;
}

L’immagine è centrata e scalata con la proprietà cover . Se la mettiamo in contain l’immagine non verrà tagliata.