immagine di sfondo pagina in ripetizione

[angelicab]

ciao
ho un'immagine di sfondo per la mia pagina che in pratica è una sfumatura di grigi .. dallo scuro al chiaro ..

se la pagina è troppo lunga però .. l'immagine naturalmente ricomincia ..
non c'è un modo per portare l'immagine di sfondo al 100% della pagina senza farla ripetere??

[Federix]

Per metterla al 100% no, però puoi fare così:

body {
background-image: url(immagine.gif);
background-repeat: x-repeat;
background-color: #CCCCCC;
}

Dove #CCCCCC è il colore finale della sfumatura. Se la sfumatura è orizzontale, usa y-repeat in background-repeat.

[angelicab]

thanks...

[pierofix]

Giusto quello che dice Federix, a parte una finezza: il valore 'x-repeat' non esiste; quello corretto è 'repeat-x'. Stesso discorso vale per 'y-repeat'.

Di solito non conviene mai usare immagini gigantesche per questo tipo di sfondi. Mettiamo il caso di una sfumatura verticale: nero in alto, grigio in basso. Basterà realizzare un'immagine stretta (diciamo una ventina di px) e alta q.b. (azzardiamo circa 500px?).

A questo punto basterà:

1. assegnare allo sfondo della pagina un colore equivalente al grigio della 'fine sfumatura';
2. piazzare l'immagine di sfondo, appena creata, nell'angolo in alto a sinistra e ripeterla in orizzontale.

Tradotto in CSS:

body
{
   background:#ccc url('sfondo.png') repeat-x 0 0;
}

[angelicab]

e se devo inserire lo sfondo in una tabella?

[pierofix]

Ti basterà assegnare un id alla tabella a cui desideri applicare lo sfondo, e agire poi così nel CSS:

XHTML
<table id="prodotti">

CSS
#prodotti
{
   background:#ccc url('sfondo.png') repeat-x 0 0;
}

[angelicab]

uhm.. ma in questo modo .. se la tabella è più lunga dell'immagine .. l'immagine si ripete .. o si allunga??

[pierofix]

Nè si ripete nè si allunga. Avrai semplicemente la parte bassa eccedente di colore grigio, come se la sfumatura più scura si fosse esaurita al termine dell'immagine.

Tra le tante soluzioni viste in rete, questa credo sia la più equilibrata.

[angelicab]

e se invece volessi vederla allungata?

[Federix]

Se la vuoi allungare vedrai l'immagine di sfondo completa e dove finisce l'immagine di sfondo, si vedrà il colore finale della sfumatura (#CCCCCC).