Move Multiple Backgrounds Infinitely Using CSS

Move multiple backgrounds infinitely using CSS

This can be done with pure CSS 3, e.g keyframed animations:

Demo: http://jsfiddle.net/dghsV/112

body {
    background-image: url("http://www.animaatjes.nl/disney-plaatjes/disney-plaatjes/finding-nemo/nemo11.gif"), url("http://images2.layoutsparks.com/1/200022/ocean-dreams-blue-waves.jpg");
    background-repeat: no-repeat;
    background-position: 50% 0%, 0;
    -moz-animation: swim 2s linear 0s infinite;
    -webkit-animation: swim 2s linear 0s infinite;
    animation: swim 2s linear 0s infinite;
}
@-moz-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}
@keyframes swim {
    from { background-position: 200% 0, 0 0; }
    to  { background-position: -100% 0, 0 0; }
}

Syntax

animation : animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

The feature is experimental, so vendor-prefixes (eg -webkit-) have to be added (see also Can I use CSS3 Animation for compatibility notes). In my demo, I've used all properties, except for the last one.

How can i make infinite flowing background with only CSS?

This should fit your slowly moving+infinite flowing+responsively fit to height background criteria.

html,body {  height: 100%;  margin: 0;  padding: 0;}
#animatedBackground {  width: 100%;  height: 100%;  position: absolute;  top: 0;  left: 0;  background: url("http://twibbon.s3.amazonaws.com/238/63bb30c8-2649-465e-9df1-ab2f8e5f7ecc.jpg");  background-repeat: repeat;  background-position: 0 0;  background-size: auto 100%;/*adjust s value for speed*/  animation: animatedBackground 500s linear infinite;}
@keyframes animatedBackground {  from {    background-position: 0 0;  }/*use negative width if you want it to flow right to left else and positive for left to right*/  to {    background-position: -10000px 0;  }}

<div id="animatedBackground"></div>

Trying to make multiple background images cycle through a slideshow with CSS and JQUERY

Try creating array from css background-image value , fading in , fading out first background image ; removing faded out background image from array , placing removed background image at last index of array ; resetting background image value to array joined by comma; fading in , fading out next , now first indexed background image ; cycling through fading in , fading out all background images ; recursively calling function , to attempt to create displayed effect of an "infinite" fade in , fade out "slideshow"

$(function() {  // set `$.fx.interval` at `0`  $.fx.interval = 0;  (function cycleBgImage(elem, bgimg) {// `elem`:`#slideshow`// set, reset, delay to `1000` after background image resetelem.css("backgroundImage", bgimg)  // fade in background image  .fadeTo(3000, 1, "linear", function() {    // set `delay` before fadeing out image    // fade in background image            $(this).delay(3000, "fx").fadeTo(3000, 0, "linear", function() {      // split background image string at comma , creating array      var img = $(this).css("backgroundImage").split(","),        // concat first background image to `img` array,        // remove first background image from `img` array        bgimg = img.concat(img[0]).splice(1).join(",");      // recursively call `cycleBgImage`      cycleBgImage(elem, bgimg);    });  });  }($("#slideshow")));});

body {  width: 400px;  height: 400px;}/* set `#slideshow` parent background color */.slideshow {  background: #000;  display:block;  width:inherit;  height:inherit;}#slideshow {  width: 100%;  height: 100%;  display: block;  opacity: 0.0;  background-color: #000;  /*      set background images as `url(/path/to/image)` here,      separated by commas   */  background-image: url("http://lorempixel.com/400/400/cats/?1"),     url("http://lorempixel.com/400/400/animals/?2"),     url("http://lorempixel.com/400/400/nature/?3"),     url("http://lorempixel.com/400/400/technics/?4"),     url("http://lorempixel.com/400/400/city/?5");  background-size: cover, 0px, 0px, 0px;/* set transtitions at 3000ms   -webkit-transition: background-image 3000ms linear;  -moz-transition: background-image 3000ms linear;  -ms-transition: background-image 3000ms linear;  -o-transition: background-image 3000ms linear;  transition: background-image 3000ms linear;    */}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="slideshow">  <div id="slideshow"></div></div>

How to transition multiple background images of an element with CSS only

Look into CSS animation property.

This snippet will give you an idea...

#slideshow {  border: 1px solid gray;  height: 330px;  width: 592px;  -webkit-animation-name: background;  -webkit-animation-duration: 5s;  -webkit-animation-direction: alternate;  -webkit-animation-timing-function: linear;  -webkit-animation-iteration-count: infinite;}
@-webkit-keyframes background {  0% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.07.png');  }  33% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.06.png');  }  100% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.12.png');  }}

<div id="slideshow"></div>

CSS way of looping a background image with cover or contain sizing

The problem is that, to make it responsive, you need to set the animated background-position using percentages.

But, when you set background-size as cover or contain, in some cases the width is adjusted to 100%. In this case, background-position using percentages is useless (won't move it).

The only way that I have found to manage this is moving the image to a pseudo element, and moving it. To keep the continuity, though, we will need two pseudo elements.

But that won't work on a textarea.

You didn't said anything about textarea being a requirement, so I am posting this. To show that it works on resize, hover it.

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

How to Animate Multiple Background images?

Check out the code to rotate each image at different speeds.

.number{height: 1000px;
        background-repeat: no-repeat;
        background-position: center;}

.no-9 {
    background-image: url(https://i.imgur.com/BZrswvf.png);
  
    -webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite
  }

.no-6 {
    background-image: url(https://i.imgur.com/XJ9zZeA.png);
  
    -webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite
  }

.no-3 {
    background-image: url(https://i.imgur.com/RJDk9uS.png);
  
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite
  }

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } 

  <div class="number no-9">
    <div class="number no-6">
        <div class="number no-3"></div>
    </div>
    </div>

Fullscreen infinite scrolling background

I have used an image element just to use the auto height of it.

Then I use a backgroiund on a pseudo that gives the ability to repeat itself as many times as needed

I have set 2 different containers with different aspect ratios to more easily check the result on different screens

.container {  border: solid 1px black;  overflow: hidden;  position: absolute;}
#ctn1 {  width: 300px;  height: 150px;}
#ctn2 {  width: 200px;  height: 350px;  left: 320px;}
.inner {  width: 100%;  position: relative;  animation: scroll 5s infinite linear;}
.inner:after {  content: "";  height: 500%;  width: 100%;  position: absolute;
  background-image: url(https://i.stack.imgur.com/FlK9o.jpg);  background-size: 100% 20%;}
.img {  width: 100%;}

@keyframes scroll {  from {transform: translateY(-100%);}    to {transform: translateY(-200%);}
}

<div class="container" id="ctn1">    <div class="inner">        <img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">    </div></div><div class="container" id="ctn2">    <div class="inner">        <img class="img" src="https://i.stack.imgur.com/FlK9o.jpg">    </div></div>

---

Related Topics