Pagina aggiornata... Venerdì, 06 Marzo 2026 * Tempo di caricamento 0.003 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 ^_^

💻 ✨ Apprezzato
100%
Voti totali: 7
Rating... 5




Commentario...

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









I vostri commenti in questa pagina...


Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥


~ Pagina visitata da 2638 utenti





Segui il telaio su Facebook

* 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 e utilità pagine web



html tag scrittura pagine web





Script per pagina



Script per gadget




Preleva anche tu una tag Help donna

Aiutami a diffondere il più possibile informazioni
utili alle donne vittime di abusi... Grazie!



Link del telaio...

ೡ Il telaio di Penelope
☆ Template webset e blog
☆ Un sito su AlterVista
☆ Gif & co...





I vostri messaggi...

ૡPenelope ♥ ~ 30/03/2026 16:18:12
Ciao carissima Ahamiah non sono riuscita a lasciare un saluto nel tuo forum quindi ti ringrazio tantissimo e ti mando un forte abbraccio qui
ૡScritto in Datari con saluto more image
=ahamiah= ~ 29/03/2026 09:48:10
Buona domenica delle Palme, ho riscoperto il vostro forum e vi faccio i complimenti. Ho prelevato il codice di uno dei vostri saluti con data. Grazie a buon lavoro.
ૡScritto in Datari con saluto more image
Cris ~ 28/03/2026 18:34:53
Ciao, sono passata per un salutino. Buon fine settimana!
ૡScritto in Commenti telaio...
BiBi ~ 25/03/2026 06:50:49
Grazie mille
ૡScritto in Testo scorrevole left
Angel ~ 21/03/2026 16:59:16
Ho letto il tuo messaggio inizio pag. : "Codice marquee deprecato..." Io avevo sul mio sito frasi scorrevoli e ora sono ferme!! Non so più come fare... a inserire una frase scorrevole! Mi puoi aiutare? Grazie cmq Penelope. Grazie di tutte le tue meraviglie che crei. Buona domenica!
ૡScritto in Home
ParisNeoni ~ 21/03/2026 10:33:31
I've gone through presumably numerous articles on this same subject this month and none of them hit home the way yours did. There's a clarity here that's tough to fake.
ૡScritto in Home
ૡPenelope ♥ ~ 19/03/2026 21:16:39
Ciao cara Sari mi fa molto piacere volevo lasciare un saluto da te ma il blog è privato quindi lo faccio qui, un abbraccio forte forte buon blog!
ૡScritto in Calendari fiorellini
Sari ~ 19/03/2026 12:54:53
Sono Sari di vocedivento e sto allestendo il mio blog pasquale. A questo scopo ho prelevato il calendarietto a fiorellini azzurri.Grazie, come sempre. Ciao
ૡScritto in Calendari fiorellini
Cris ~ 16/03/2026 15:25:23
Ciao. Ho preso un tuo Almanacco, è perfetto per il mio blog. Grazie!
ૡScritto in Almanacco soft
Sabry ~ 10/03/2026 11:39:07
Io ti adoro ... vorrei tanto essere brava come te, ti seguo da anni e rimango sempre affascinata dalla tua astuzia e bravura e creativitá ♥ Prendo spunti ♥ Grazie di ♥
ૡScritto in Sfondo pagina