background-image como - ¿Puedo tener varias imágenes de fondo usando CSS?




imagenes expandir (8)

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Podemos agregar fácilmente múltiples imágenes usando CSS3. Podemos leer en detalle aquí http://www.w3schools.com/css/css3_backgrounds.asp

¿Es posible tener dos imágenes de fondo? Por ejemplo, me gustaría que una imagen se repita en la parte superior (repetir-x) y otra en toda la página (repetir), donde la imagen de toda la página está detrás de la que se repite en la parte superior.

Descubrí que puedo lograr el efecto deseado para dos imágenes de fondo al configurar el fondo de html y el cuerpo:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

¿Es esta "buena" CSS? hay algun metodo mejor? ¿Y si quisiera tres o más imágenes de fondo?


Si quieres varias imágenes de fondo pero no quieres que se superpongan, puedes usar este CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

con esta estructura HTML:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

La forma más fácil que he encontrado para usar dos imágenes de fondo diferentes en un div es con esta línea de código:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Obviamente, eso no tiene que ser solo para el cuerpo del sitio web, puede usarlo para cualquier div que desee.

¡Espero que ayude! Hay una publicación en mi blog que habla de esto un poco más a fondo si alguien necesita más instrucciones o ayuda - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div .


utilizar esta

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

una forma sencilla de ajustar cada posición de la imagen con la posición de fondo: y establecer la propiedad de repetición con la repetición de fondo: para cada imagen individualmente


Sí, es posible, y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback . Si observa el código fuente, verá que el fondo está formado por varias imágenes, colocadas una encima de la otra.

Aquí está el artículo que demuestra cómo hacer el efecto que se puede encontrar en la Vitamin . Un concepto similar para envolver estas capas de 'piel de cebolla' se puede encontrar en A List Apart .


CSS3 permite este tipo de cosas y se ve así:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Las versiones actuales de todos los principales navegadores ahora lo admiten , sin embargo, si necesita admitir IE8 o una versión inferior, entonces la mejor manera de solucionarlo es tener divs adicionales:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

Podría tener un div para la parte superior con un fondo y otro para la página principal, y separar el contenido de la página entre ellos o colocar el contenido en un div flotante en otro nivel z. La forma en que lo haces puede funcionar, pero dudo que funcione en todos los navegadores que encuentres.





¡Acabo de terminar de desarrollar el complemento y está disponible para que todos lo usen! Esperamos que lo disfrutes.

Ver proyecto en GitHub - Ver Website proyecto. (para que puedas ver todos los estilos divididos)

Uso

En primer lugar, asegúrese de tener incluida la biblioteca jQuery . La mejor manera de obtener la última versión de jQuery es actualizar su etiqueta de cabecera con:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Después de descargar los archivos, asegúrese de incluirlos en su proyecto:

<link rel="stylesheet" type="text/css" href="css/splitchar.css">
<script type="text/javascript" src="js/splitchar.js"></script>

Margen

Todo lo que tiene que hacer es asignar la clase splitchar , seguido del estilo deseado al elemento que envuelve su texto. p.ej

<h1 class="splitchar horizontal">Splitchar</h1>

Después de hacer todo esto, solo asegúrese de llamar a la función jQuery en su archivo de documento listo como este:

$(".splitchar").splitchar();

Personalización

Para que el texto se vea exactamente como lo desea, todo lo que tiene que hacer es aplicar su diseño de la siguiente manera:

.horizontal { /* Base CSS - e.g font-size */ }
.horizontal:before { /* CSS for the left half */ }
.horizontal:after { /* CSS for the right half */ }


¡Eso es! Ahora tienes el plugin Splitchar todo listo. Más información al respecto en Website .







css background-image