Sfondo diverso per la metà sinistra e destra del div

Question

Ho un layout div centrato. Il lato sinistro del div sullo sfondo dovrebbe essere bianco e il lato destro dovrebbe essere verde. Entrambi dovrebbero estendersi all'infinito.

Penso che dovrebbe essere abbastanza semplice, ma non capisco proprio adesso. Qualche soluzione facile? Grazie!

----------------------------------------------------- 
(div 1)  __________________________ 
      |(div 2)   |   | 
      |    |   | 
      |    |   | 
<- white |  white  | green | green -> 
      |    |   | 
      |    |   | 
      |________________|_________| 

------------------------------------------------------ 

Answer 1

aggiungere un'immagine di sfondo con i due colori per il div esterno e consentire al browser di scala esso (invece di affiancarlo).

Ogni colore deve riempire esattamente il 50% della larghezza dell'immagine per assicurarsi che i colori non perdano mai su entrambi i lati.

Forse anche posizionare l'immagine assolutamente dietro il div interno.

Per idee su come allungare l'immagine, vedere questa domanda: CSS Background Repeat

Answer 2

avevo messo dentro che div div due altri e dare loro le dimensioni appropriate e colori backgound

Answer 3

Si potrebbe avere due div sulla parte esterna, e quindi avere uno dei tuoi div in ciascuno. Allineamento a destra e allineamento a sinistra rispettivamente. In questo modo:

----------------------------------------------------- 
(div)      | (div) 
      _________________|_________ 
      |(div)   | (div) | 
      |    |   | 
      |    |   | 
<- white |  white  | green | green -> 
      |    |   | 
      |    |   | 
      |________________|_________| 
          | 
------------------------------------------------------ 

Answer 4

utilizzare gli elementi ::after e ::before pseudo. In questo modo puoi persino ottenere tre colori e fare la bandiera italiana!

div { 
    height:300px; 
    width:100%; 
    outline:thin solid black; 
    position:relative; 
    background:white; 
} 
div::after, div::before { 
    height:300px; 
    content:' '; 
    position: absolute; 
    top: 0; 
    width: 33%; 
} 
div::after { 
    right: 0; 
    background-color: red; 
} 
div::before { 
    left: 0; 
    background-color: green; 
} 

Ecco un violino: http://jsfiddle.net/g8p9pn1v/

e dei suoi risultati:

Answer 5

ne dite di creare due div bg-sinistra e BG-destra, con una posizione assoluta all'interno di un contenitore pieno di larghezza. Dal momento che sono posizionati in modo assoluto, puoi quindi sovrapporre il contenuto sopra di essi. Così, per esempio, utilizzando il markup bootstrap:

<div class="fullwidth"> 
    <div class="bg-left"></div> 
    <div class="bg-right"></div>  

    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       Insert left side content here... 
      </div> 
      <div class="col-xs-6"> 
       Insert right side content here... 
      </div> 
     </div> 
    </div> 
</div> 

Allora il vostro css:

.fullwidth { 
    position: relative; 
    width: 100%; 
} 
.bg-left { 
    background: #000; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    position: absolute; 
    width: 50%; 
} 
.bg-right { 
    right: 0; 
    top: 0; 
    bottom: 0; 
    background: #ddd; 
    position: absolute; 
    width: 50%; 
} 

Answer 6

È possibile utilizzare Gradiente. Questo è un sito Web in cui è possibile ottenere il codice cross-browser di ciò che ti serve.

http://colorzilla.com/gradient-editor/

Può essere un po 'di confusione per usare agli inizi, ma lo trovo uno strumento molto potente.

Saluti!