Centrare un immagine con dimensioni in percentuale

[wandaground]

Ciao,
ho un problema nella centratura di un'immagine di background che ha un'altezza 100%.
Ciò che volevo infatti è che l'immagine si adattasse ad ogni risoluzione di schermo in base all'altezza, omettendo la larghezza e fin qui tutto ok.
Quando però vado a cercare di centrare questa immagine orizzontalmente......succedono i casini!
Non ho mai avuto problemi di questo tipo se l'immagine ha dimensioni fisse.
Il codice nel mio css è questo:

#sfondo {
text-align:center;
top: 100px;
display:block;
margin-left:auto;
margin-right:auto;
height: 100%;
position:fixed;
}

ma ovviamente non funziona. Sto facendo mille tentativi senza successo.
Qualcuno di voi ne sa qualcosa?
Help!!!!!

[wandaground]

Scusate, ma ho dimenticato di inserire il codice html:

<div id="sfondo">
[img]backimages/01.jpg[/img]
</div>

Come potete vedere ho dovuto omettere la larghezza, per questo ora non so come comportarmi.
Se avessi avuto una larghezza mi sarebbe bastato fare così:

position:absolute;
height: 400px;
width: 400px;
left:50%;
margin-left:-200px;

E invece con le percentuali come si fa?!!

[MaxSimon]

Se devi ottenere un layout che si adatti allo schermo, a mio avviso è meglio non utilizzare un posizionamento assoluto.
Scusa, ma se l'immagine è di background perchè non utilizzi la proprietà background-image?
Puoi impostare:

body {
   background-image:url('immagine.jpg');
   background-repeat:no-repeat;
   background-position:center top;
} 

e automaticamente hai l'immagine centrata in larghezza e posizionata in alto.

Forse non ho capito cosa intendevi?

[wandaground]

Grazie mille per l'imminente risposta ma....in questo modo però l'immagine non è ridimensionabile!!
Quindi purtroppo questo codice non mi serve!


Ho provato comunque questo scipt ed effettivamente l'immagine si centra bene ma poi, quando vado a ridimensionare la finestra del browser, lo sfondo viene tagliato!
Altri suggerimenti?

[MaxSimon]

Allora nel html devi utilizzare questo codice:

<div id="content">
  <div id="bgimage">
      [img]prova.png[/img]
  </div>     
</div> 

mentre nel css avrai:

#content { margin:0 auto;}
#bgimage img { width:100%; height:100% } 

In questo modo le immagini con id="bgimage" assumeranno come dimensione il 100% dell'elemento contenitore, cioè l'elemento con id="content".

Ridimensionando la finestra l'immagine si adatta sia in larghezza (width:100%) che in altezza (height:100%).

Se ti interessano altri esperimenti con le immagini nei layout fluidi dai un'occhiata qui.

Spero di esserti stato d'aiuto.
Ciao.

[wandaground]

Grazie mille!! Funzionaaaaa!!!