toda - imagen de fondo html5 css3

Modo CSS de hacer un bucle de una imagen de fondo con una cubierta o contener un tamaño

Question

Digamos que está intentando animar un fondo tilable como este:

.container {
  width: 160px;
  height: 91px;
}
.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}

<div class="container">
  <textarea class="bg"></textarea>
</div>

¡Tan pronto como cambie las dimensiones del contenedor, se rompe la animación de bucle!

¿Hay alguna manera de hacer que esto responda sin JS?

Answer 1

Para cada background-position: 200px bottom; necesita agregar 1 1second por ejemplo, si desea agregar 2S, agrega 200px más, de modo que quede en background-position: 400px bottom; Creo.

Aquí está el código:

.container {
  width: 160px;
  height: 91px;
}

.bg {
 width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) fixed;
  -webkit-animation: displace 1s linear infinite;
  animation: displace 1s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom; }
}

@keyframes displace {
  from { background-position: 0 bottom; }
  to { background-position: 200px bottom;}
}

<div class="container">
  <textarea class="bg"></textarea>
</div>

Espero que funcione para tu caso. Avísame si tienes alguna pregunta.

Answer 2

El problema es que, para hacerlo receptivo, debe establecer la posición de fondo animada usando porcentajes.

Pero, cuando configura el tamaño de fondo como tapa o contiene, en algunos casos, el ancho se ajusta al 100%. En el caso, la posición de fondo usando porcentajes es inútil (no la moverá).

La única forma que he encontrado para gestionar esto es mover la imagen a un pseudo elemento y moverlo. Para mantener la continuidad, sin embargo, necesitaremos pseudo elementos.

Pero eso no funcionará en un área de texto.

No dijiste nada sobre que textarea era un requisito, así que estoy publicando esto. Para mostrar que funciona al redimensionar, desplácese sobre ella.

.container {
  width: 160px;
  height: 100px;
  position: relative;
  border: solid 1px black;
  display: inline-block;
}
.container:nth-child(2) {
   width: 220px;  
}
.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.bg:before, .bg:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(http://i.stack.imgur.com/wBHey.png);
    background-size: 100%;
    animation: move 2s infinite linear;
}

.bg:before {
    right: 100%;
}

@keyframes move {
    from {transform: translateX(  0%);}
      to {transform: translateX(100%);}
}

<div class="container">
  <div class="bg"></div>
</div>
<div class="container">
  <div class="bg"></div>
</div>

Answer 3

El problema que tiene es con el cambio de tamaño de height y sus diferentes configuraciones. Para que funcione con sus configuraciones reales, el desplazamiento debería ser 2 veces la height de la imagen (ya que la imagen tiene una relación de 2: 1). No creo que puedas hacer solo por css .

Pero tienes diferentes opciones. No estoy seguro exactamente qué parte de la muestra desea conservar, así que aquí hay tres maneras de hacer que su traducción trabaje en el cambio de resize . Ninguno tiene exactamente su configuración, porque las que tiene dificultan (¿es imposible?) Establecer el desplazamiento correcto. Dado que estás estirando el ancho según la altura, es difícil de seguir. A través de JS sería fácil, pero css tiene acceso limitado a estos valores.

Las soluciones propuestas mantienen la altura constante para que pueda mantener constante su valor de desplazamiento.

Primero, el tamaño de fondo es el tamaño del contenedor en px.

Segunda solución, cambia el tamaño del área de texto solo en el eje x.

En tercer lugar, repita en el eje y y mantenga la altura y el ancho corregidos.

Probablemente haya otras soluciones que quizás sean más adecuadas para sus necesidades específicas.

.container {
  width: 160px;
  height: 80px;
   margin: 10px;
}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: 160px 80px;
     padding: 0px;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg2 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  background-size: contain;
     padding: 0px;
    resize: horizontal;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}
.bg3 {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left center;
  background-size: 160px 80px;
     padding: 0px;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}

@-webkit-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}
@-keyframes displace {
  from {
    background-position: 0 center;
  }
  to {
    background-position: 160px center;
  }
}

<div class="container">
  <textarea class="bg"></textarea>
</div>
<div class="container">
  <textarea class="bg2"></textarea>
</div>
<div class="container">
  <textarea class="bg3"></textarea>
</div>

Answer 4

Esto es similar a la respuesta de Ilpo, excepto que no cambia el tamaño de la imagen ( background-size: auto; ). La animación es suave en todo, independientemente del tamaño del contenedor.

La desventaja es que el ancho (200px) de la imagen debe conocerse de antemano.

Como dijiste tilable, y como esta imagen parece estar disponible en ambas direcciones, también hice que se repitiera en ambas dimensiones. Como resultado, su área de textarea se llena con la imagen de fondo embaldosada, animada para desplazarse horizontalmente. Si solo desea mosaico en 1 dirección, puede cambiar la repeat nuevo a repeat-x y cambiar la posición vertical de top a lo que necesite.

.container {width: 160px;height: 91px;}

.bg {
  width: 100%;
  height: 100%;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat left top;
  background-size: auto;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
}

@-webkit-keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}

@keyframes displace {
  from { background-position: 0px top; }
  to   { background-position: 200px top; }
}

<div class="container"><textarea class="bg"></textarea></div>

Answer 5

Pude hacerlo funcionar haciendo que el fondo sea el doble de grande.

Sé que esta no es la solución perfecta, pero tal vez puedas hacer un truco con el tamaño de la imagen o algo para que se vea como querías.

    .container {width: 160px;height: 91px;}
    .bg {
      width: 100%;
      height: 100%;
      background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
      background-size: 200%;
      -webkit-animation: displace 2s linear infinite;
      animation: displace 2s linear infinite;
    }
    @-webkit-keyframes displace {
      from { background-position: left center;
      } to { background-position: 200% center; }
    }
    @keyframes displace {
      from { background-position: left center;
      } to { background-position: 200% center; }
    }

<div class="container"><textarea class="bg"></textarea></div>

Answer 6

.container {
  border: 1px solid black;
  display: inline-block;
  background: url(http://i60.tinypic.com/2j2fhjm.jpg) repeat-x left center;
  -webkit-animation: displace 2s linear infinite;
  animation: displace 2s linear infinite;
  background-size: 160px 100%;
}

.bg {
  float: left;
  border: 0;
  margin: 10px;
  width: 160px;
  height: 91px;
  background-color: rgba(255, 255, 255, .5);
}

@-webkit-keyframes displace {

  from {
    background-position: 0 center;
  }

  to {
    background-position: 160px center;
  }

}

@keyframes displace {

  from {
    background-position: 0 center;
  }

  to {
    background-position: 160px center;
  }

}

<div class="container">
  <textarea class="bg"></textarea>
</div>