Morpheusweb.it - Risorse per webmaster: script, ASP.NET, C#, Visual Basic .Net, tutorial, asp, javascript, css, php, html, java, ADO, VBScript, forms, frames, Active Server Pages, Dynamic HTML, database, gratis per webmaster e webdesigner

Tramite la proprietà Background dei CSS, possiamo controllare lo sfondo degli elementi, sia per quanto riguarda i colori sia per quanto riguarda le immagini.

Proprietà CSS dello sfondo


CSS Background


Tramite la proprietà Background dei CSS, possiamo controllare lo sfondo degli elementi, sia per quanto riguarda i colori sia per quanto riguarda le immagini.

Proprietà:

Proprieta Descrizione Valori Esempi
background Per impostare tutte le proprietà dello sfondo background-color
background-image
background-repeat
background-attachment
background-position
¤ background ¤
background-attachment Dice se l’immagine di sfondo è fissa o scrolla con la pagina scroll
fixed
¤ background-attachment ¤
background-color Colore di sfondo di un elemento colore
transparent
¤ background-color ¤
background-image Imposta un’immagine come sfondo url
none
¤ background-image ¤
background-position La posizione dell’immagine top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-perc y-perc
x-pos y-pos
¤ background-position ¤
background-repeat Se un’immagine deve essere ripetuta oppure no repeat
repeat-x
repeat-y
no-repeat
¤ background-repeat ¤


Vediamole una alla volta:

background

Permette impostare tutte le proprietà dello sfondo.

Valori possibili sono
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position


Esempio

.ConSfondo {
  width:300px;
  height:200px;
  background: #ffffff url(demo5.jpg) repeat-y
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤



background-attachment


Permette di dire se lo sfondo scrolla con la pagina oppure no.

Valori possibili sono
  • scroll (Lo sfondo si muove con il resto della pagina)
  • fixed (Lo sfondo è fisso)

Esempio

.ConSfondoCheScrolla {
  width:300px;
  height:200px;
  overflow:auto;
  background-image: url(demo5.jpg);
  background-attachment: scroll;
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤



background-color


Permette di impostare il colore di sfondo di un elemento HTML.

Valori possibili sono
  • un colore ( Può essere un nome (red), in valore rgb (rgb(255,0,0)), o un numero esadecimale (#ff0000) )
  • transparent (Se lo sfondo è trasparente)
Esempio

.ConColoreDiSfondo {
  width:200px;
  height:200px;
  background-color: red;
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤



background-image


Serve ad impostare l’immagine di sfondo.

Valori possibili sono
  • un url (Il percorso del’immagine)
  • none (Se non si vuole un’immagine di sfondo)
Esempio

.ConImmagineDiSfondo {
  width:300px;
  height:200px;
  background-image: url(demo5.jpg);
  background-color: #ffffff
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤



background-position


Imposta la posizione dell’immagine di sfondo.

Valori possibili sono
  • top left
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
  • x-percentuale y-percentuale (Il primo valore è la posizione orizzzontale, il secondo quello verticale.)
  • x-posizione y-posizione (Il primo valore è la posizione orizzzontale, il secondo quello verticale. L’angolo in alto a sinistra è: 0 0)
Esempio

.ConSfondoInAlto {
  width:300px;
  height:600px;
  background-image: url(demo5.jpg);
  background-position: top left;
  background-repeat: no-repeat;
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤



background-repeat


Dice se e come un’immagine di sfondo sarà ripetuta.

Valori possibili sono
  • repeat (Immagine ripetuta orizzontalmente e verticalmente )
  • repeat-x (Immagine ripetuta orizzontalmente)
  • repeat-y (Immagine ripetuta verticalmente)
  • no-repeat (L’immagine di sfondo viene visualizzata una volta soltanto)
Esempio

.ConSfondoRipetuto {
  width:300px;
  height:600px;
  background-image: url(demo5.jpg);
  background-repeat: repeat-y;
}


¤ Clicca qui per visualizzare la demo dell'esempio... ¤


Stampa la pagina


 

Inizio pagina

risorse per webmaster

css


css menu font css template css css align css javascript css templates dvd css css tutorial css center css download html css css vertical css firefox css margin css div css editor dvd region css css float css link css design css overflow css border css style text css css ie background css css generator css ul css reference css position css padding css input css class css images css layout css server css software css a table css css background image css img css mozilla css css filter css validator cisco css css zen css examples css properties css hover css zen garden image css what is css css list styles css css display css training css form box css css help css program background image css clan css css background css body css bordi css font css frame css guida completa css horizontal css html css image css img css layer css p css region css table css testo css text css vault css zengarden div css firefox css float css form css guida ai css guida css immagine css immagini css javascript css manuale css menu css protezione css rapid css region css strumenti di decodifica css style css manuale istruzioni usare documentazione css tutorial advanced css tutorial corso css css div tutorial css guida css guida completa css manuale css menu tutorial css tutorial download guida guida ai css guida css manuale css tutorial css

css, guida, Tutorial,




Vai nel sito Morpheusweb.it - Risorse per Webmaster
asp, dhtml

Morpheusweb.it - Risorse per Webmaster" tratta di asp, javascript, php, guida, Tutorial