immagine centrata con sfumature laterali infinite

**wildgate** · 16-05-2010, 10:53

Ciao a tutti, vi espongo il mio problema: ho un'immagine, anzi un logo che va piazzato al centro di una pagina in un DIV. Questo logo ha il lato sinistro di colore verde e quello destro di colore rosso. In caso volessi piazzare questo logo al centro della pagina come dovrei impostare i 2 lati se volessi che il rispettivo colore proseguisse all'infinito? Insomma logo al centro con banda verde della stessa altezza del logo che prosegue verso sinistra e banda rossa infinita della stessa altezza del logo verso destra....
Ho provato a impostare 3 DIV, uno con sfondo colore sinistro, uno col jpg in centro e l'altro con sfondo del colore destro, li ho flottati a sinistra non ho dato larghezza ma solo l'altezza (quella del jpg), ho provato a impostare la larghezza al 33% ai 2 DIV laterali, poi a tutti e 3..... insomma non riesco cmq ad ottenere l'effetto per cui il div centrale è sempre della stessa larghezzae centrato mentre quelli laterali dovrebbero adattarsi a coprire il resto della larghezza rimanendo, ovviamente, ognuno della stessa larghezza dell'altro... chissà se sono riuscita a spiegarmi....
Grazie per le eventuali risposte
Alessandra

**Mich_** · 17-05-2010, 09:22

codice:

HTML:
<html>
  <head>
    ...
  </head>
  <body>
    ....
  </body>
</html>

CSS:
html {
  width: 100%;
  height: 100%;
  background: url(duebande.png) repeat-y top center;
}
body {
  width: 100%;
  height: 100%;
  background: url(tuologo.png) no-repeat top center;  /* o forse center center, dipende da come lo vuoi */
}

Il file duebande.png sara` un'immagine alta 1px, larga il piu` possibile (2100px ?) con a sinistra il colore del tuo logo a sinistra e a destra il colore della destra ed eventualmente al centro avra` una sfumatura in modo che se la pag e` piu` alta del logo non si vedano interruzioni

**wildgate** · 19-05-2010, 21:50

Grazie 1000 Mich_ , ha funzionato alla perfezione, posto il codice adattato al mio caso

codice:

.sfondo 
{ 
width: 100%; 	
background: url(../../images/bkg.png) repeat-y top center; 
}  

.logo 
{ 	
width: 950px; 	
height: 80px; 	
margin: auto; 	
background-image: url(../../images/header.png); 
}

Discussione: immagine centrata con sfumature laterali infinite

Strumenti discussione

Ricerca discussione

Visualizza

immagine centrata con sfumature laterali infinite

Permessi di invio