Asbafo
a- a+

Lo sfondo

 

Il colore di sfondo predefinito di un documento HTMLè il bianco, ma naturalmente si puòcambiare con molta facilità. Vediamo coma farlocon un foglio di stile "interno":
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body { background:#FFFF00; color:#000000 }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
 
 
 
La stringa:
body { background:#FFFF00} cambierà il colore di sfondo in giallo.Si possono usare, al posto del formato esadecimale,anche i nomi dei colori in lingua inglese. Ad esempiocon la stringa body {background:yellow } siotterrà lo stesso risultato, ma l'utilizzodel formato esadecimale consentirà di adottaresfumature di colore altrimenti non ottenibili.Analogamente si possono usare colori anche in formatorgb utilizzando la stringa body { background:rgb(255,255,0) }
 
Nota 1: I colori espressi in formato esacimale devonoessere preceduti dal simbolo della celletta #

Nota 2: Come avrai notato, sono stati utilizzati due simboli, le parentesi graffe, non presenti in una normale tastiera. Poiché sono simboli ricorrenti nella creazione dei fogli di stile, occorre spiegare come ottenerli:

  • la parentesi graffa aperta { si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo (Shift)" , "control (Ctrl)" , "alterna (Alt)" , digitando la lettera è e rilasciando i tasti;
  • la parentesi graffa chiusa } si ottiene tenendo premuti contemporaneamente i tasti "maiuscolo(Shift)" , "control (Ctrl)" , "alterna (Alt)" , digitando il simbolo + (attenzione quello a fianco della lettera "è" e non quello del tastierino numerico!) e rilasciando i tasti.

 

2.2 Immagine di sfondo

 
Ovviamente, al posto di un colore, potresti decidere diutilizzare un'immagine di sfondo. Vediamo comafarlo con un foglio di stile "interno":
 
Negli esempi utilizzeremo questo sfondo, in modo darendere visibili gli effetti:
 

 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body { background-image: url("sfondo.jpg") }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
body { background-image:url("sfondo.jpg") userà l'immagine"sfondo.gif" come background. Ovviamente ilnome potrà essere anche diverso e potrai usareanche un'immagine ".gif".
 
 
 
Nota: se l'immagine da utilizzare come sfondo nonfosse nella stessa cartella che contiene il documentoHTML, occorrerà modificare il percorso nellastringa. Se, ad esempio, si trovasse in unasottocartella chiamata img la stringaassumerebbe questa forma:
body { background-image:url("img/sfondo.jpg")

Se si trovasse in una cartella superiore chiamata sempre img la stringa assumerebbe questa forma:
body { background-image: url("../img/sfondo.jpg")

Se si trovasse addirittura su un altro spazio web assumerebbe questa forma:
body { background-image:
url("http://www.nomedominio.com/img/sfondo.jpg")

 
Abbiamo visto come inserire un'immagine di sfondo.Uno potrebbe chiedersi il perché inserire unosfondo con un foglio di stile, anziché con unsemplice comando HTML. Perché con un foglio distile si possono assegnare delle particolaricaratteristiche alle immagini di sfondo, impensabilecon il solo HTML, o comunque di difficile attuazione.Vediamo alcuni elementi nei particolari.

 

2.2.1 Immagine di sfondo - Attachment

 
Determina se lo sfondo deve rimanere fisso (default)oppure muoversi con il testo.

Ha due possibili valori:

  • fixed
  • scroll
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-attachment: fixed }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-attachment:fixed fa si che l'immaginedello sfondo rimanga statica, mentre il contenuto dellapagina scorre.
 
 
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-attachment: scroll }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-attachment:scroll fa si che sial'immagine dello sfondo che il contenuto dellapagina scorrano assieme.
 
 

 

2.2.2 Immagine di sfondo - Repeat

 
Determina come deve replicarsi l'immagine disfondo.

Ha quattro possibili valori:

  • repeat-y
  • repeat-x
  • repeat
  • no-repeat
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-repeat: repeat-y }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-repeat:repeat-y fa si che lo sfondosi ripeta solo in una colonna verticale posta sul latosinistro del monitor lasciando vuoto il resto dellapagina.
 
 
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-repeat: repeat-x }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-repeat:repeat-x fa si che lo sfondosi ripeta solo in una riga orizzontale posta sul latosuperiore del monitor lasciando vuoto il resto dellapagina.
 
 
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-repeat: repeat }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-repeat:repeat fa sì chelo sfondo si ripeta su tuttala superficie della pagina. Formalmente equivale adomettere il valore.
 
 
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-repeat: no-repeat }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-repeat:no-repeat fa sì chelo sfondo non si ripeta. In pratica appare solouna tessera nell'angolo superiore sinistro dellapagina che è poi il punto di origine.
 
 
 
Nota: Gli argomenti si possono anche sommare tra loro,basta che non siano in contrasto. Uno stile come quelloriportato qui sotto genererà una pagina
 
    <html>     <head>     <title>Titolo del documento</title>     <style type="text/css">body    { background-image: url("sfondo.jpg"); background-attachment: fixed;     background-repeat: repeat-y }     </style>     </head>     <body>     <p>I contenuti della pagina vanno qui</p>     </body></html>
 
La stringa:
background-image:url("sfondo.jpg"); background-attachment:fixed; background-repeat: repeat-y farà sì che lo sfondo siripeta in una colonna verticale posta sul lato sinistrodel monitor e che non scorra con il resto del contenutodella pagina.

 



Ti potrebbe interessare anche

commenta la notizia