html - poner - Usar una imagen de fondo sobre un color de fondo en CSS

imagen de fondo html

Question

He diseñado una página web en PSD y estoy en el medio de convertirla. Dentro de mi contenido principal, tengo un color de fondo sólido, pero tengo un efecto de brillo en una capa separada que aparece en la parte superior del color de fondo.

Tengo un contenedor que contiene todo el código, tengo un encabezado, principal y pie de página. En general, agregué el color de fondo sólido y también agregué la imagen de fondo del resplandor que corté de PSD. Sin embargo, el color de fondo sólido no parece mostrarse y solo muestra el efecto de brillo. Las imágenes a continuación muestran cómo se ve y cómo debería verse:

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

El problema es que tus estilos se anulan entre sí. Primero debe poner el background-color background-image y usar background-image lugar de background . Declare todos los valores en sus propias propiedades para que la propiedad de background no anule el background-color .

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

Answer 2

Intenta reemplazar

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

Puedes usar multi-fondo:

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

Explicar: use background opción background css, primero agregue la imagen, que el color de fondo.

DEMO EN VIVO

Answer 4

Una forma de hacerlo es envolviendo el elemento #main con un envoltorio donde establece el color de fondo, luego configure la opacidad que lo corresponde (si es necesario)

#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>