0

Estoy intentando poner múltiples fondos con una sola declaración de CSS, así:

background{dodgerblue url(imatges/flag1.png), url(imatges/flag2.png), url(imatges/fondo.gif)}

Sin embargo, así no aparece nada, ni siquiera el color de fondo.

Busco concentrarlo, ya que las imágenes de fondo también tienen varios atributos, y evitar tenerlos desperdigados en background-size, background-repeat, background position y background-attachment.

4 respuestas 4

0

Me temo que si quieres poner más de una imagen lo tendrás que hacer a través de la propiedad background-image.

Si sólo vas a utilizar una imagen sí que puedes indicarla dentro de la propiedad background:

#fondo{
  display: inline-block;
  width: 200px;
  height: 500px;
  background: dodgerblue url("https://www.w3schools.com/cssref/img_tree.gif");
}

#fondo2{
  display: inline-block;
  width: 200px;
  height: 500px;
  background-color: dodgerblue;
  background-image: url("https://www.w3schools.com/cssref/img_tree.gif"), url("https://www.w3schools.com/cssref/paper.gif");
}
<div id="fondo"></div>

<div id="fondo2"></div>

0

Mira creo que este es buen ejemplo para lo que preguntas...

<ol>
    <li>no-repeat
        <div class="one">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>

Este es el css:

li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* background repeat CSS */
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* Multiple images */
.five {
    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
    background-repeat: repeat-x,
                       repeat-y;
    height: 144px;
}
0

es mi primera respuesta ahi va mi opción..

.imgMulti { background-image: url("X.png"),url("x.png"), linear-gradient(to right, rgba(30, 60, 117, 1), rgba(255, 255, 255, 0)); }

<div class="imgMulti"></div>

0

yo tenia un problema similar en la seccion Nos domaines d’activités de este sitio http://gozlanperez.com/ y lo resolvi con una animación para ir cambiando el background

@-webkit-keyframes animation-change-images {

  0%   { background: url('img/animation/1.jpg');}
  33%  {background: url('img/animation/2.jpg');}
  64% { background: url('img/animation/3.jpg');}
  100%   { background: url('img/animation/1.jpg');}
}
@-moz-keyframes animation-change-images {

  0%   { background: url('img/animation/1.jpg');}
  33%  {background: url('img/animation/2.jpg');}
  64% { background: url('img/animation/3.jpg');}
  100%   { background: url('img/animation/1.jpg');}
}

y posteriormente aplico la animacion

.image-domaines-carousel-1:hover {
  -webkit-animation: animation-change-images 1s infinite;
    animation: animation-change-images 1s infinite;
}

es lo que necesitas? saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.