Poner imagen en background css
Imagen de fondo css no-repeat
Casi todos los navegadores actuales tienen soporte para múltiples imágenes de fondo y fondos css. Consulte http://caniuse.com/#feat=css-gradients para conocer el soporte de los navegadores. Para un buen post sobre por qué no necesita múltiples prefijos de navegador, vea http://codepen.io/thebabydino/full/pjxVWp/
IE9 y superiores pueden apilar imágenes de esta misma manera. Usted podría utilizar esto para crear una imagen de degradado para ie9, aunque personalmente, no lo haría. Sin embargo, hay que tener en cuenta que cuando se usan sólo imágenes, ie < 9 ignorará la declaración fallback y no mostrará ninguna imagen. Esto no ocurre cuando se incluye un gradiente. Para utilizar una sola imagen de reserva en este caso, sugiero utilizar el maravilloso elemento HTML condicional de Paul Irish junto con su código de reserva:
Otras propiedades que se aplicarían a una sola imagen también pueden estar separadas por comas. Si sólo se suministra un valor, éste se aplicará a todas las imágenes apiladas, incluido el degradado. background-size: 40px; limitará tanto la imagen como el degradado a 40px de altura y anchura. Sin embargo, el uso de background-size: 40px, cover; hará que la imagen sea de 40px y que el degradado cubra el elemento. Para aplicar una configuración sólo a una imagen, establezca el valor predeterminado para la otra: background-position: 50%, 0 0; o para los navegadores que lo soportan usa inicial: background-position: 50%, initial;
Imagen de fondo
Hay varias subpropiedades que puedes añadir a tus imágenes de fondo, como background-repeat y background-position, que hemos utilizado en el ejemplo anterior. Incluso puede añadir gradientes a una imagen de fondo.
El orden en el que se listan las imágenes es importante debido al orden de apilamiento. Esto significa que la primera imagen listada es la más cercana al usuario, según la documentación. Luego, la siguiente, y la siguiente, y así sucesivamente.
En el código anterior hemos listado dos imágenes. La primera imagen (morocco-blue.png) estará delante de la segunda (oriental-tiles.png). Ambas imágenes tienen el mismo tamaño y carecen de opacidad, por lo que sólo vemos la primera imagen.
Imagen de fondo html
El siguiente código HTML-CSS coloca una imagen encima de otra creando un div relativo que se coloca en el flujo de la página. Luego se coloca la imagen de fondo primero como relativa para que el div sepa el tamaño que debe tener. Lo siguiente es colocar la imagen superpuesta como absoluta relativa a la parte superior izquierda de la primera imagen.
position: relative – En el método de posición relativa, puedes posicionar el elemento en relación a su posición normal. En este caso debes usar izquierda o derecha y arriba o abajo para mover el elemento en relación a su contenedor.
Cuando se superponen elementos CSS, al utilizar la posición absoluta y relativa, el comportamiento por defecto es tener los primeros elementos debajo de los posteriores. En estos casos podemos controlar la superposición de elementos posicionados utilizando la propiedad z-index . Al utilizar la propiedad z-index se puede especificar cuál de las cajas aparece encima de la otra.
Css background-image: url
Los bordes del elemento se dibujan encima de ellos, y el color de fondo se dibuja debajo de ellos. Cómo se dibujan las imágenes en relación con la caja y sus bordes se define mediante las propiedades CSS background-clip y background-origin.
Nota: Aunque las imágenes sean opacas y el color no se muestre en circunstancias normales, los desarrolladores web deben especificar siempre un color de fondo. Si las imágenes no pueden cargarse -por ejemplo, cuando la red no funciona-, se utilizará el color de fondo como alternativa.
Problemas de accesibilidadLos navegadores no proporcionan ninguna información especial sobre las imágenes de fondo a la tecnología de asistencia. Esto es importante sobre todo para los lectores de pantalla, ya que un lector de pantalla no anunciará su presencia y, por tanto, no transmitirá nada a sus usuarios. Si la imagen contiene información crítica para entender el propósito general de la página, es mejor describirla semánticamente en el documento.