[Risolto] Sfondo sfumato

sirfabio

[Risolto] Sfondo sfumato

Ciao a tutti,
Ho letto di come poter impostare uno sfondo con gradiente ad una pagina html, creando un'immagine alta pochi pixel che viene ripetuta in orizzontale...
Però non riesco a trovare o capire come ripetere questo effetto per chiudere il layout in una specie di quadrato:?
Spero di exere stato chiaro
Per il gradiente uso questo codice
body{
background: url(sfondo.jpg);
background-position: center;
background-repeat: repeat-y;
background-color: #000000;
}

onsitus

Crea un div 'contenitore' nel <body> della pagina dalle misure desiderate e imposta l'immagine di sfondo a quel div.:bho:

sirfabio

Allora per favore potresti farmi vedere un esempio di codice???

onsitus

Questo sarebbe proprio un esempio di base, poi non so esatamente quello che deve fare.:bho:
[html]
</html>
<head>
<style type="text/css">
body{
}
#contenitore{
width: 200px;
height: 500px;
background: url(sfondo.jpg) repeat-y #000000;
}
</style>
</head>
<body>
<div id="contenitore"></div>
</body>
</html>
[/html]

sirfabio

mi spiego:
la prova la stò facendo qui: http://sirfabio.netsons.org/sfondi/, volevo fare in modo che i bordi in alto e in basso chiudessero la sfumatura creando l'effetto quadrato

laburno

@SirFabio said:

mi spiego:
la prova la stò facendo qui: http://sirfabio.netsons.org/sfondi/, volevo fare in modo che i bordi in alto e in basso chiudessero la sfumatura creando l'effetto quadrato

mmm
Non sono sicuro di avere capito.. ma: aggiungere un po di bordo al div contenitore?

onsitus

Sperando che ho capito bene, l'uso di 3 immagine come sfondo: una per la parte 'top', una per la parte centrale, e una per la parte 'bottom' cosi da riformare un quadro intero.

Prova cosi:

[HTML]
<head>
<style type="text/css">
body{
background-color:#000000;
}
html, body, #wrapper {
min-height: 100%;
width: 100%;
height: 100%;
}
html>body, html>body {
height: auto;
}
{
position: absolute;
width:730px;
background: url(sfondo.jpg) repeat-y center #000000;
top:0;
left:50%;
margin-left: -365px;
}
#top{
height:30px;
background: url(top.jpg) repeat-x;
}
#bottom{
position: absolute;
height:30px;
width: 100%;
background:url(bottom.jpg) repeat-x;
bottom: 0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
[/HTML]

Sara da cambiare le misure (di wrapper/top/bottom) e url per 'top'/'bottom' (togliere il repeat-x se necessario.

:bho:

sirfabio

Grandioso...adesso stò aggiustando le misure ma è quello che cercavo!!!
Grazie mille, fantastica!!!

onsitus

Prego. Sara da vedere come si comporta una volta aggiunto il contenuto.;)