Utilizzo di un'immagine di sfondo su un colore di sfondo nei CSS

Question

Ho progettato una pagina Web in PSD e sono nel mezzo della conversione. All'interno del mio contenuto principale ho un colore di sfondo solido, ma ho un effetto bagliore su un livello separato che appare sopra il colore di sfondo.

Ho un contenitore che contiene tutto il codice, ho un header, main e footer. All'interno del main, ho aggiunto il solido colore di sfondo e aggiunto anche l'immagine di sfondo del bagliore che ho tagliato da PSD. Tuttavia, il solido colore di sfondo non sembra mostrare e mostra solo l'effetto bagliore. Immagini qui sotto mostrano quello che sembra e ciò che dovrebbe apparire come:

---

CSS:

Html { 
background: white; 
} 

#container { 
width: 955px; 
height: 900px; 
margin: 0px auto 0px auto; 
} 

#main{ 
background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37; 
height: 900px; 
width: 955px; 
} 

Answer 1

È possibile utilizzare più di fondo:

#main { 
    width: 900px; 
    height: 955px; 
    background: url(../images/slogan.png) no-repeat, #282d37; 
}​ 

Per spiegare: utilizzare l'opzione background css, aggiungere prima immagine, di colore di sfondo.

LIVE DEMO

Answer 2

Provare a sostituire

background: url(../images/slogan.png) top left no-repeat; 
background-color: #282d37; 

Con

background: #282d37 url(../images/slogan.png) no-repeat top left; 

Answer 3

Un modo per farlo è avvolgente l'elemento #main con un involucro in cui impostare il colore di sfondo, quindi impostare l'opacità di corrispondenza (se necessario)

#mainwrapper{ 
    background-color: red; 
    height:100px; 
    width:100px; 
} 

#main{ 
    background: url(http://www.w3schools.com/css/klematis.jpg) repeat; 
    opacity: 0.6; 
    filter:alpha(opacity=60); 
    height:100px; 
    width:100px; 
} 

<div id="mainwrapper"> 
    <div id="main"> 
    </div> 
</div> 

Answer 4

Il problema i tuoi stili si annullano a vicenda. È necessario inserire prima lo e utilizzare background-image anziché background. Dichiarare tutti i valori nelle proprie proprietà in modo che la proprietà background non sovrascriva quella .

#main{ 
    background-color: #282d37; 
    background-image: url(../images/slogan.png); 
    background-position: left top; 
    background-repeat: no-repeat; 
    height: 900px; 
    width: 955px; 
}​