~*~ Sfondo/background pagina~*~

Vediamo come e quale tipo di sfondo/background possiamo utilizzare nelle nostre pagine,
possiamo utilizzare un colore o un'immagine, abbiamo due tipi di codice con diverse varianti, da inserire
direttamente nel tag body, o da preferire, nei css/foglio di style, del codice per il nostro spazio.

C'è l'imbarazzo della scelta vi assicuro^^ cominciamo con un semplice colore

CODICE DA INSERIRE NEL TAG BODY
<body bgcolor="#EAEAFF">

CODICE DA INSERIRE NEL FOGLIO DI STYLE
<style type="text/css">
<!--
body {background-color=#EAEAFF;}
-->
</style>		 La nostra pagina sarà tutta colorata

Per uno sfondo con immagine

CODICE DA INSERIRE NEL TAG BODY
<body background="http://URL PAGINA IMMAGINE>

CODICE DA INSERIRE NEL FOGLIO DI STYLE
<style type="text/css">
<!--
body {background-image : url("http://URL PAGINA IMMAGINE");}
-->
</style>		 E lo sfondo-immagine scelto
"rivestirà" tutta la pagina

E questi due esempi sono i classici metodi per avere lo sfondo della pagina colorato a nostro gusto,
ma, possiamo anche dare alla nostra pagina un colore e mettere un immagine fissa in un punto preciso



→ Sfondo colorato e immagine fissa al top-pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background-color: #FFF5fd;background-image : url('http://URL PAGINA IMMAGINE');
background-attachment: fixed;
background-repeat: repeat-x}
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa al centro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background-image : url('http://URL PAGINA IMMAGINE');
background-position : center ;
background-attachment: fixed ;
background-repeat: repeat-x }
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa ai piedi della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background:#AAFFC6 url('http://URL PAGINA IMMAGINE') repeat-x fixed center 100%; }
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa al lato sinistro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background-color: #FFF5fd;background-image : url('http://URL PAGINA IMMAGINE');
background-attachment: fixed;
background-repeat: repeat-y}
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa al lato destro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background-color: #FFF5fd;background-image : url('http://URL PAGINA IMMAGINE');
background-attachment: fixed 100% 0%;
background-repeat: repeat-y}
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa in basso lato destro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background:#000000 url('http://URL PAGINA IMMAGINE') no-repeat fixed 100% 100%; }
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa in basso, lato sinistro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
<!--
body {background:#000000 url('http://URL PAGINA IMMAGINE') no-repeat fixed 0% 100%;}
-->
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa in alto, lato destro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
body {
background-color: #000000;
background-image: url('http://URL PAGINA IMMAGINE');
background-repeat: no-repeat;
background-attachment: fixed 100% 0%;
}
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




→ Sfondo colorato e immagine fissa in alto, lato sinistro della pagina

CODICE DA INSERIRE NEL FOGLIO DI STYLE

<style type="text/css">
body {
background-color: #000000;
background-image: url('http://URL PAGINA IMMAGINE');
background-repeat: no-repeat;
background-attachment: fixed
}
</style>

CLICCA QUI E GUARDA L'EFFETTO^^

Preleva questo codice qui




Spero di esser stata chiara in tutto, se avete problemi lasciate un messaggio in home
Grazie della visita buon lavoro un abbraccione Penelope♥

* Tutorial Html by Penelope *

..:: Home ::..

Tutorial html e script parte integrante del sito www.iltelaiodipenelope.it

- -

Classifica di siti - Iscrivete il vostro!