centrare sito e sfondo...

**bigrattle** · 03-04-2009, 12:14

Sto realizzando un sito che ha in larghezza una dimensione fissa. In altezza, dopo una parte fissa deve esserci uno sfondo che si ripete fino a fine pagina in base alle diverse risoluzioni (scelta che non mi piaceva tra l'altro ma il cliente vuole questo..).
Utilizzo il seguente codice qui "semplificato" con un solo div al posto dell'intero set del sito. Il codice funziona con tutti i browser tranne con Explorer. Rimane sfalzato di un paio di pixel (lo sfondo che si ripete è 2 px più a destra). Dove sbaglio?

codice:

<style type="text/css">
body{
margin-top:0;
background:url(images/bg.jpg);
background-attachment:fixed;
background-repeat:repeat-y;
background-position:50% 50%;
    }

#contenitore_sito {
	margin: 0 auto; 
	margin-top:0px;
	width:980px; //da dimensione fissa del sito
                  }
</style>
</head>
<body>
<div id="contenitore_sito">
      <div id="rettangolo">
            [img]images/bg.jpg[/img]
      </div>
</div>

nota: uso nel test la stessa immagine "bg" per controllare l'allineamento...
Se riduco il div "contenitore sito" a 978 va con explorer...

**nickt** · 03-04-2009, 14:05

Allora innanzitutto tutte le opzioni per il background puoi modificarle così:

codice:

background : transparent url(images/bg.jpg) repeat-y 1px 50%;

in contenitore_sito se utilizzi margin: 0 auto; non c'è bisogno di inserire nuovamente margin-top: 0px;

posta il link al sito.

**bigrattle** · 03-04-2009, 15:21

Al momento niente link perché non ho ancora messo il sito online...
Provo a seguire le tue indicazioni e ti faccio sapere!
Grazie mille (anche per la sacrosanta osservazione sull'inutilità di ripetere margin-top)

**bigrattle** · 03-04-2009, 15:30

hmmm no, in questo modo mi sposta giustamente il bg ad un pixel da sinistra...

**bigrattle** · 03-04-2009, 18:01

ho risolto facendo un po' di aggiustamenti.... ora va...

codice:

<style type="text/css">
html{
height:100%;
    }

body{
margin:0;
height:100%;
    }

#contenitore_sito {
	margin: 0 auto;
	width:980px;
	min-height: 100%;
	height: auto !important;
	background: url(images/bg.jpg) repeat-y center center;
              }
</style>
</head>
<body>

<div id="contenitore_sito">
	<div id="rettangolo">
    [img]images/bg.jpg[/img]	</div>
</div>

Discussione: centrare sito e sfondo...

Strumenti discussione

Ricerca discussione

Visualizza

centrare sito e sfondo...

Permessi di invio