1. background-color :
background-color è la proprietà CSS che definisce lo sfondo degli elementi , per applicare il background nell’ intera pagina ci occorrerà applicarla al selector body.
Questa proprietà può essere applicata anche a porzioni minori di sfondo come ad una porzione di testo.
Nell’ esempio di seguito assegneremo al nostro foglio di stile , un background-color :
- al titolo
- e all’ intera pagina.
STYLE.CSS
h1 {
color : green;
background-color : white ;
}
body
{
background-color : pink ;
}
PAGINA HTML
<!doctype html>
<html lang = “it”>
<head>
<link rel = “stylesheet” type = “text/css” href =
“style.css”/>
</head>
<body>
<h1> Titolo di esempio </h1>
</body>
</html>
2. background-image:
Questa proprietà, ci consente di assegnare alla nostra pagina , uno sfondo.
Per assegnare uno sfondo alla nostra pagina introduciamo la proprietà background-image.
Per utilizzare un’ immagine come background è necessario che sia contenuta nella stessa directory della pagina html e del documento style.css
Apriamo il nostro file style.css e scriviamo : background-image : url(“immagine da usare.est“);
STYLE.CSS
h1 {
color: red;
background-color: yellow;
}
body {
background-color : #C29FFF;
background-image : url (“logoesempio.png”);
}
PAGINA HTML
<!doctype html>
<html lang = “it”>
<head>
<link rel = “stylesheet” type = “text/css” href = “style.css”/>
</head>
<body>
<h1> Titolo di esempio </h1>
</body>
</html>
Per impostazione predefinita, un’immagine di sfondo viene ripetuta sia verticalmente che orizzontalmente.
La proprietà background-repeat imposta se e come verrà ripetuta un’immagine di sfondo.
background-repeat :
background-repeat , può assumere i seguenti valori :
- repeat : e’ il valore di default e ripete in entrambi i versi
- no repeat : non ripete
- repeat-x : ripete l’ immagine orizzontalmente
- repeat-y : ripete l’ immagine verticalmente
STYLE.CSS
h1 {
color: red;
background-color: yellow;
}
body {
background-color : #C29FFF;
background-image : url (“logoesempio.png”);
background-repeat : repeat-x ;
}
Per impostazione predefinita, un’immagine di sfondo se impostata su NO-REPEAT si troverà in alto a sinistra
La proprietà background-position decide dove andrà l’immagine.
background-position:
Il posizionamento delle immagine avviene mediante la proprietà background-position e può essere rappresentato:
- Tramite Pixel : background-position:15px 200px;
- Tramite Percentuale : background-position:50% 50%;
- Tramite indicazioni testuali : background-position:left top;left top |left center|left bottom |right top|right center|right bottom|center top|center center|center bottom|
STYLE.CSS
h1 {
color: red;
background-color: yellow;
}
body {
background-color : #C29FFF;
background-image : url (“logoesempio.png”);
background-repeat : repeat-x ;
background-position : right top;
}
background-attachment:
La proprietà background-attachment imposta se un’immagine di sfondo scorre con il resto della pagina o è fissa.
di default, le immagini di background scorrono insieme al resto della pagina
background-attachment può assumere i seguenti valori:
- Fixed : l’immagine rimarrà fissa
- scroll : l’ immagine scorre con il resto della pagina
STYLE.CSS
h1 {
color: red;
background-color: yellow;
}
body {
background-color : #C29FFF;
background-image : url (“logoesempio.png”);
background-repeat : repeat-x ;
background-position : right top;
background-attachment : fixed ;
}
E’ possibile raggruppare le varie proprietà background per rendere il codice più breve seguendo il seguente ordine:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body { background: grey url (“imm.est“) no-repeat fixed right bottom;}
