A Sbafo! Tutto per il web gratis e in italiano...

 AVVISO

   Aggiungi ai preferiti  

:: Sei qui: Home > Manuali > Indice generale dei manuali - Giochiamo con i fogli di stile - pagina 4
:: Home

Grafica
:: Sfondi
:: Pulsanti
:: Linee
:: Gioielli
:: Puntini
:: Gif animate
:: Clipart
:: Icone
:: Set completi

Risorse
:: Caratteri
:: Applet e Javascript
:: Suoni
:: Programmi
:: Manuali

Servizi
:: Spazio web
:: Contatori di accessi
:: Libri degli ospiti
:: Crea i tuoi metatag

Richieste
:: Pulsanti
:: Assistenza
:: Scrivici

Varie
:: Dicono di noi
:: Note legali
 
Crea il tuo sito con noi...
In collaborazione
Testi e Manuali
Pubblicità
Pubblicità
Noi sosteniamo
C'E' BISOGNO ANCHE DI TE
 
Indice di questo manuale Indice di tutti i manuali Area download

Giochiamo con i fogli di stile

Versione 1.0

Manuale scritto da Seatiger Team™ nel mese di agosto 2002

A SBAFO! Tutto per il web gratis e in italiano...

Copyright© Seatiger Team 2002
Sono vietate la riproduzione, la pubblicazione e la distribuzione anche parziale del presente manuale
senza il consenso scritto degli autori.

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'immagine dello sfondo rimanga statica, mentre il contenuto della pagina scorre.

anteprima

<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 sia l'immagine dello sfondo che il contenuto della pagina scorrano assieme.

anteprima

 

2.2.2 Immagine di sfondo - Repeat

Determina come deve replicarsi l'immagine di sfondo. 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 sfondo si ripeta solo in una colonna verticale posta sul lato sinistro del monitor lasciando vuoto il resto della pagina.

anteprima

<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 sfondo si ripeta solo in una riga orizzontale posta sul lato superiore del monitor lasciando vuoto il resto della pagina.

anteprima

<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ì che lo sfondo si ripeta su tutta la superficie della pagina. Formalmente equivale ad omettere il valore.

anteprima

<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ì che lo sfondo non si ripeta. In pratica appare solo una tessera nell'angolo superiore sinistro della pagina che è poi il punto di origine.

anteprima

 
Nota: Gli argomenti si possono anche sommare tra loro, basta che non siano in contrasto. Uno stile come quello riportato 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 si ripeta in una colonna verticale posta sul lato sinistro del monitor e che non scorra con il resto del contenuto della pagina.

anteprima

 
Nota: Gli argomenti sono separati tra di loro da un punto e virgola.
 

 
Torna alla pagina precedente Vai alla pagina successiva
Pagina precedente Pagina successiva
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Registrazione dominio, spazio illimitato, 5 caselle di posta, a soli 24,79 euro all'anno iva inclusa.

www. .

Questo sito è ottimizzato per Explorer 5.0 o superiore, Java compatibile. Alcune delle applicazioni presenti potrebbero non essere supportate da Netscape© o da sistemi operativi diversi da Microsoft© Windows. Tutti i marchi citati sono di proprietà dei loro legittimi autori.

Webmaster: Seatiger Team