CSS : BACKGROUND

di

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:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

body { background: grey url (“imm.est“) no-repeat fixed right bottom;}

ᐊ Cos’ è il Css
Colori ᐅ

Lascia un commento