Pagina aggiornata... Giovedì, 11 gennaio 2024 * Tempo di caricamento 0.74 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 ^_^
94.29%
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 3427 utenti


 H: 
Buon Autunno 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...

Elise
26/10/2025 19:43:22
Ciaoooo carissima Penelope,ho preso una fatina per il mio blog.Sei bravissima come sempre e ti ringrazio tanto.Un abbraccioneElise
ೡ Scritto in... Romantiche fate...
 
JamieSilverJsC
26/10/2025 19:08:12
Buon sera Amica!! Bellissima tuo sito!! Buon domenica
ೡ Scritto in... Home
 
filod'arianna
25/10/2025 07:27:02
Buongiorno! Ho adottato un pixel ❣😘
ೡ Scritto in... I love Winter...
 
Frann
24/10/2025 21:22:26
Ciao cara Penelope...come stai?Sono passata solo per farti sapere che ho aggiunto una casella messaggi al mio blog. Sentiti libera di lasciare un messaggio lì se vuoi :) Un abbraccio, cara.
ೡ Scritto in... Home
 
ೡPenelope ♥
24/10/2025 15:43:49
Grazie cara Veronica, perdonami se ti rispondo qui ma non sono registrata nel forum e non posso lasciare commenti ^_^ mi fa molto piacere ti piacciano le cosine che realizzo, un abbraccio forte
ೡ Scritto in... Home
 
Veronica
23/10/2025 14:37:12
Ciao ti o preso un datario con saluto
ೡ Scritto in... Pucciosi!
 
Veronica
23/10/2025 08:18:29
Ciao preso un tu adottino x il forum
ೡ Scritto in... Home
 
Cleo
22/10/2025 07:58:14
sempre ricco il tuo sito buona giornata tesoro un abbraccio
ೡ Scritto in... Home
 
Veronica
21/10/2025 17:37:12
Ciao preso uno x il mio Blog troppo bellini
ೡ Scritto in... I love Winter...
 
Grazia
20/10/2025 17:09:30
Dimenticavo il link ♥
ೡ Scritto in... Home