2 sfondi uno a dx e uno sx di un div centrato...

**Pandax** · 22-05-2008, 09:59

domanda...

sto facendo una pagina... in un div centrato sulla pagina ho una tabella

Codice PHP:


<div style="position:absolute;

    left:50%;

    margin-left:-454px;

    top:0px;

    width:908px;">



<table width="908px" cellspacing="0" cellpadding="0" >

<tr>

<td></td>

</tr>

</table>



</div>

volevo poter mettere 2 sfondi al body...uno alla sinistra del div e uno alla destra...
e pensavo di fare così:
(solo che non va)

Codice PHP:




html {



width:170px; height:821px;

left:0px;

top:0px;

padding: 0;

background-image:url("parte_nascosta_sx.jpg");

background-position:top;



}



body {



width:199px; height:821px;

left:50%;

margin-left:454px;

top:0px;

padding: 0;

background: url("parte_nascosta_dx.jpg");

background-position:top;



}

**Mich_** · 22-05-2008, 10:13

Quei giochini li puoi fare con i blocchi <div>, non con <html> e <body>.

In realta` non credo neppure che puoi limitare la larghezza di <html>: questo oggetto corrisponde alla finestra del brwoser, ed e` determinato dalle impostazioni dell'utente.
Per il <body> il discorso e` analgo in qualche brwoser (nel senso che l'oggetto <body> conincide esattamente con il <html>); mentre in altri sono due oggetti diversi, per cui potrebbe essere piu` piccolo. Dato che non puoi conoscere il browser dell'utente, conviene sempre definire il body largo al 100%.

Comunque sia <body> e` contenuto dentro <html> e quindi non ha senso definirlo piu` largo di questo.

Invece se hai due sfondi, puoi inserirli uno in <html> e uno in <body>, magari uno a sinistra ed uno a destra; ambedue con ripetizione solo in y.

**Pandax** · 22-05-2008, 10:22

Originariamente inviato da Mich_
Invece se hai due sfondi, puoi inserirli uno in <html> e uno in <body>, magari uno a sinistra ed uno a destra; ambedue con ripetizione solo in y.

io ho appunto 2 sfondi... e l'idea di inserirne uno in html e uno in body l'ho presa da un post su questo forum... (vedi codice sopra)
...solo che probabilmente sbaglio qualcosa...
vorrei solo posizionarli uno a sx e l'altro a dx del div... dandogli appunto una posizione..

che faccio tolgo width e height... e poi?

**Mich_** · 22-05-2008, 10:26

... e poi usi background-position:
background-position: top left;
background-position: top right;

**Pandax** · 22-05-2008, 10:45

ripulendo un po come mi hai suggerito...

Codice PHP:


html {



/*left:0px; top:0px; */

background-image:url(/img/parte_nascosta_sx.jpg);

background-position:top left;

background-repeat:no-repeat;



}



body {



/*left:50%; margin-left:454px; top:0px;*/

background-image:url(/img/parte_nascosta_dx.jpg);

background-position:top right;

background-repeat:no-repeat;



}

lo sfondo a sx si vede.... il problema è quello a destra... che non si vede... e che io dovrei posizionsa a una certa distanza left (cioè alla fine del div centrato)... che appunto pensavo di calcolarmi con la riga commentata... che però non va...

**Mich_** · 22-05-2008, 11:04

Forse devi anche rendere trasparente il colore di sfondo del body:
background-color: transparent;

La posizione puoi definirla in px o in %: in tal caso l'ordine dei parametri e` X Y (mentre se non usi valori numerici e` Y X).

Comunque in qualsiasi manuale di riferimento di CSS queste cose sono riportate - vedi ad es. http://www.w3schools.com/css/css_ref...asp#background

**Pandax** · 22-05-2008, 11:21

boh... tralasciando il posizionamento..anche se scrivo così.. mi visualizza solo quello di sinistra nell'html

Codice PHP:


html {



/*left:0px; top:0px; */

background-image:url(/img/parte_nascosta_sx.jpg);

background-position:top left;

background-repeat:no-repeat;.

background-color: transparent;



}



body {



font-family:Arial, Helvetica, sans-serif;

font-size: 11px;

    

/*left:50%; margin-left:454px; top:0px;*/

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;



background-image:url(/img/parte_nascosta_dx.jpg);

background-position:top right;

background-color: transparent;

background-repeat:no-repeat;



}

Discussione: 2 sfondi uno a dx e uno sx di un div centrato...

Strumenti discussione

Ricerca discussione

Visualizza

2 sfondi uno a dx e uno sx di un div centrato...

Permessi di invio