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 2615 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...

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
Gabriella ~ 09/03/2026 18:37:40
Ciao Penny, come sempre i tuoi lavori sono molto eleganti ,ne ho prelevato due per adesso ;) grazie
ૡScritto in Decori pagine Primavera
soleyada ~ 07/03/2026 22:02:27
Mi hai fatto tornare indietro nel tempo cara Penny, non smettere mai di splendere, è tutto stupendo qui, ti auguro il meglio, bacioni :-*
ૡScritto in Countdown Primavera
Cris ~ 24/02/2026 08:17:18
Ciao, e bentornata. Mi è sempre piaciuto il tuo bel sito. Ho creato da poco un blog, il tuo sito è il primo tra i miei preferiti.
ૡScritto in Home
MOra Ribelle ~ 16/02/2026 12:05:35
Buongiorno, contenta del tuo ritorno. Mi domando come metto anche io questo box saluti? grazie
ૡScritto in Gif & co...
Sari ~ 14/01/2026 17:31:32
Buon Anno Penelope. Ho prelevato un top pagina sostituendo quello natalizio. Tutto bello e utile qui, grazie.
ૡScritto in Marquee con Javascript
Frann ~ 25/12/2025 15:09:37
Cara amica Penelope, ti auguro un Natale, con pace, amore e tanta gioia. Bacione ~ Frann
ૡScritto in Home
filod'arianna ~ 24/12/2025 08:50:20
Auguri di buon Natale Penelope, e a tutti i visitatori del Telaio 🎄✨😃
ૡScritto in Home
Sari ~ 18/12/2025 22:01:59
Ciao Penelope, ti seguo da anni e tanto ho imparato dalle tue lezioni: grazie. Ti auguro un Natale sereno e, nonostante i tempi che stiamo vivendo, in allegria. Buon Natale
ૡScritto in Home