Immagine sfondo CSS con body centrato

[kitty84]

Salve a tutti,
avrei un problema con in mio CSS... vorrei inserire un'immagine di sfondo tipo il sito della Feltrinelli http://www.lafeltrinelli.it/fcom/it/home.html che appare ai lati (img rossa sfumata) con un body centrato.

Ho provato con background-image: url(img/sfondo2.jpg); applicato al body ma non appare niente.

Vi sarei molto grata se potete darmi una mano, è importante!!!
Grazie in anticipo a chi risponderà

Riporto tutto il CSS:

hr,.pgNav{
position:absolute;
top:-1000em;
width:1px;
height:1px;
overflow:hidden;
}


/* i collegamenti */
a img{
border:none;
}
a:link{
background:transparent;
color:#03C;
}
a:visited{
background:transparent;
color:#800080;
}
a:hover,a:focus,a:active{
background:transparent;
color:#03C;
}
/* l'intestazione: i collegamenti */
#testa a:link,#testa a:visited{
text-decoration:none;
}
#testa a:hover,#testa a:focus,#testa a:active{
text-decoration:underline;
}
/* l'intestazione: il logo */
h1{
position:relative;
top:21px;
left:10px;
margin:0;
padding: 0.5em;
}
.testa{
margin:0;
padding:0 25%;
}
#slogan{
position:absolute;

position:absolute;
left:220px;
top:21px;


margin:10px;
padding:0.1em;
font: serif;
color:green;
font-style:italic;

}


/* l'intestazione: il menu di navigazione, prima parte */
.menuNavigazione{
margin:0;
padding:0.5em 0;
color:green;
text-align:center;
font-weight:bold;
font:15px; Arial,Helvetica,sans-serif;
}
.menuNavigazione li{
display:inline;
margin:0 0.5em;
height:0;

}
.menuNavigazione a:link,
.menuNavigazione a:visited{
background:#FFF;
color:#000;
}
.menuNavigazione a:hover,
.menuNavigazione a:focus,
.menuNavigazione a:active{

color:green;
}

#nav ul a.attiva:link,
#nav ul a.attiva:visited,
#nav ul a.attiva:hover,
#nav ul a.attiva:focus,
#nav ul a.attiva:active{
background-color:#CCC;
color:#000;
}
/* l'intestazione: il collegamento all'homepage */
#goHome{
position:absolute;
top:10px;
left:650px;
width:100px;
text-align:right;
}
#goHome a:link,
#goHome a:visited{
background:#FFF;
color:#666;
text-decoration:none;
}
#goHome a:hover,
#goHome a:focus,
#goHome a:active{
background:#FFF;
color:#666;
text-decoration:underline;
}

/* il corpo centrale */
#corpo{
margin:0 0 0 38px;
width:712px;
}
/* il corpo centrale: le tre aree principali */
#principale{
float:left;
width:548px;
margin-bottom:3.6em;
}
#prodotti{
float:right;
width:164px;
}
#siae{
clear:left;
margin:0;
background:#FFF;
color:#666;
}
/* il corpo centrale: il prodotto in particolare evidenza */
#focus{
clear:left;
font-size:110%;
width:534px;
padding-bottom:10px;
border-bottom:1px solid #999;
margin-bottom:10px;
}
#focus h2{
font-size:100%;
margin:0;
}
#focus p{
margin:0;
}
#focus h2 img{
margin-bottom:10px;
display:block;
}
#focus h2 br{
display:none;
}
/* il corpo centrale: le ultime notizie */
#notizie{
float:left;
width:126px;
}
#notizie h2{
margin:0;
font-size:110%;
}
#notizie ul{
margin:10px 0 40px 0;
padding:0;
list-style:none;
}
#notizie ul li{
margin-bottom:14px;
background:url(i/dot.gif) 0 0 no-repeat;
text-indent:7px;
}
/* il corpo centrale: prodotti o servizi che si vuole promuovere */
.spot{
float:left;
margin-left:10px;
width:126px;
}
.spot h2{
margin:0;
font-size:110%;
height:2.4em;
display:table-cell;
}
* html .spot h2{
display:block;
}
.spot a img{
margin-top:10px;
display:block;
}
.spot p{
margin:3px 0;
}
/* prodotti: i bordi */
.prodotto{
background:#FFF url(i/prod_bord_bot.gif) left bottom no-repeat;
color:#666;
}
.prodotto h2{
background:transparent url(i/prod_bord_top.gif) left top no-repeat;
color:#666;
}
/* prodotti */
.prodotto h2{
margin:0;
padding:5px 6px 3px 6px;
border-bottom:1px solid #CCC;
font-size:110%;
}
/* prodotti */
.prodotto img{
float:left;
margin:5px 5px 5px 6px;
}
.prodotto p{
margin:5px 6px 5px 73px;
}

.prodotto{
margin-bottom:10px;
padding-bottom:5px;
float: left;width:100%;
}


body{margin:0;
padding:0 25%;
background-image: url(img/sfondo2.jpg);

font:11px; Arial,Helvetica,sans-serif;}
div body {background-image: url(img/sfondo2.jpg); }

[E.d.i.73]

prova così:

body{
background-image: url(img/sfondo2.jpg); background-repeat:repeat-x;
}

[kitty84]

Provato.. l'immagine continua a non apparire

[E.d.i.73]

Sono andato sul sito mostrato,ho salvato lo sfondo con nome e l'ho provato,a me il test va bene,verifica il nome dell'immagine..

[kitty84]

vora l'immagine viene visualizzata, mancavano gli apici:
background-image:url('sfondo2.jpg');

il problema ora è che mi va anche sotto il testo mentre io vorrei vederla solo a lato, lo sfondo centrale deve restare bianco, come il sito della feltrinelli appunto.
cosa devo fare???

grazie ancora, sono un po' imbranata, mi scuso

[E.d.i.73]

dovresti usare dei div eposizionarli dove ti interessa,ti faccio un piccolo esempio su una pagina bianca:
<HTML>
<HEAD>
<style type="text/css">
#a{width:300;
height:500px;
background-image:url('sfondo2.jpg');
background-repeat:repeat-x;
margin-left:10px}
</style>
</HEAD>
<BODY>
<div align="left" id="a">
</div>
</BODY>
</HTML>
se non è chiaro fammi sapere

[kitty84]

Si grazie ho risolto, ho messo tutto dentro un div contenitore e ho messo lo sfondo bianco.

Ho un altro problema, la dimensione della pagina, credo sia un problema di risoluzione.
Ho sommato tutte e 3 le width e la somma è 1424.
La mia pagina occupa (al centro) un metà dello schermo, mentre vedo che quasi tutti i siti, questo stesso html.it, occupano 2/3 della pagina.
Come si fa ad allargare? Ci sono dei posizionamenti relativi credo che fanno confusione, se aumento le width si sfalza tutto.
Anche il menu orizzontale dà un sacco di problemi. uffff


Grazie ancora per la pazienza!!!

[E.d.i.73]

Dovresti partire da un div principale di larghezza x,dove andrai a mettere tutto il contenuto,ti faccio un esempio con colore di sfondo per evidenziare il div:
<HTML>
<HEAD>
<style type="text/css">
#a{width: 900px;
height:1000px;
margin-left: -450px;
position: absolute;
left: 50%;
background-color:#71A2F2
}

</style>
</HEAD>
<BODY>
<div id="a">

</div>
</BODY>
</HTML>

[kitty84]

ecco ok me l'ha allargato
ma mi avanza un sacco di spazio lateralmente...
la struttura è un po' incasinata, se allargo qualcosa mi buta cose su o giù e non allinea più niente
in teroria dovrebbe essere che il div ched contiene tutto che è largo 900px contiene ad esempio altri 3 div, due di 180 e uno di 540? poi come li allineo?

[E.d.i.73]

penso che ti convenga ripartire da capo oppure potresti mandarmi l'html,così posso dargli un'occhiata.