Pagina aggiornata... Giovedì, 11 gennaio 2024 * Tempo di caricamento 0.13 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Html » Sfondo pagina

..:: Sfondo o background pagina ::..

Quando si scrive una pagina web una delle prime cose a cui si pensa è lo sfondo o background
ovvero un colore o uno sfondo grafico, in pagine che contengono sopratutto testo è preferibile un colore
a cui abbinare quello per il testo e agli elementi grafici per rifinire, uno sfondo grafico è più indicato
se poi si usa un contenitore, div o table, con un colore di sfondo per il testo e altri contenuti
altrimenti si confonde tutto con i "disegni" dello sfondo

Ecco i tag necessari per impostare lo sfondo/background, con colore o immagine,
in linea cioè direttamente nel tag body, o nello style css

<body bgcolor="#eaeaff">

<style type="text/css">
body {background-color=#eaeaff;}
</style>
Pagina con un colore di sfondo

<body background="https://url immagine>

<style type="text/css">
body {background-image : url("https://url immagine");}
</style>
Pagina con un'immagine di sfondo

In base al lavoro che si vuole realizzare si sceglierà quale impostare,
anche se l'opzione style css è sempre consigliata, si potranno aggiungere i parametri
per il testo, i link, eventuali contenitori ed il codice della pagina sarà più ordinato,
inoltre si potrà realizzare qualcosa di molto carino giocando con colori e immagini,
ho preparato delle pagine esempio per visualizzare l'effetto finale

* Nel codice da prelevare il colore per lo sfondo pagina è quello che ho usato
negli esempi, modificate secondo le vostre esigenze

* Sfondo colorato e un'immagine fissa all'inizio della pagina

<style type="text/css">
body {background-color: #fff5fd;
background-image: url('https://url immagine');
background-attachment: fixed;
background-repeat: repeat-x}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

* Sfondo colorato e un'immagine fissa al centro della pagina

<style type="text/css">
body {background-color: #e6f2fe;
background-image: url('https://url immagine');
background-position : center;
background-attachment: fixed;
background-repeat: repeat-x}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

* Sfondo colorato e immagine fissa ai piedi della pagina

<style type="text/css">
body {background:#f0f4e6 url('https://url immagine') repeat-x fixed center 100%; }
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

* Sfondo colorato e immagine fissa nel lato sinistro della pagina

<style type="text/css">
body {background:#fff5fd url('https://url immagine') repeat-y fixed}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

* Sfondo colorato e immagine fissa nel lato destro della pagina

<style type="text/css">
body {background:#e6f2fe url('https://url immagine') repeat-y fixed 100% 0%}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui
* Sfondo colorato e immagine fissa in basso lato destro della pagina

<style type="text/css">
body {background:#e4e1d1 url('https://url immagine') no-repeat fixed 100% 100%} </style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

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

<style type="text/css">
body {background:#e9d7df url('https://url immagine') no-repeat fixed 0% 100%}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

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

<style type="text/css">
body {background:#e9e6d7 url('https://url immagine') no-repeat fixed 100% 0%}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui

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

<style type="text/css">
body {background:#e9e4ec url('https://url immagine') no-repeat fixed}
</style>

Clicca qui per vedere una pagina esempio
Preleva questo codice qui


Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


Dai un giudizio a questo tutorial... Grazie ^_^
100%
Voti totali: 7
Rating... 5





Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* ♥ Gif...

  


~ Pagina visitata da 3072 utenti


 H: 
Buona Primavera e ...buon weekend!





Segui il telaio su Facebook

Privacy Policy Cookie Policy

* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..





..:: Script page ::..



..:: Script gadget ::..


Accessori e gadget del telaio...


Spazio web...

Realizzare e gestire un sito web
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...