1

I am trying to add some animation to the background image. I am trying to rise it upwards for a particular height, how can i do That?

.riseImages {
   position: absolute;      
   width: 100%;
   height: 300px;
   overflow: hidden;
   z-index: 4;
   background-image: url("img/page1/bg shapes.png");
   background-repeat: repeat;
   background-size: 350px;
   opacity: 0.3;
   border-left: 1px solid blueviolet;
   border-right: 1px solid blueviolet;
   background-size: 350px 300px;
 }

 .topRise {
           top: 0px;
           left: 0px;
         }

 .bottomRise {
           top: 500px;
           left: 0px;
      }
Vasim
  • 257
  • 2
  • 14
user3176413
  • 29
  • 1
  • The most naive solution would be setting margin to negative values – piezol Aug 24 '15 at 07:54
  • possible duplicate of [How to have multiple CSS transitions on an element?](http://stackoverflow.com/questions/7048313/how-to-have-multiple-css-transitions-on-an-element) – MarmiK Aug 24 '15 at 09:17

1 Answers1

2

yes, use background-position http://www.w3schools.com/cssref/pr_background-position.asp

.riseImages 
 {
   background-position: value;
   position: absolute;      
   width: 100%;
   height: 300px;
   overflow: hidden;
   z-index: 4;
   background-image: url("img/page1/bg shapes.png");
   background-repeat: repeat;
   background-size: 350px;
   opacity: 0.3;
   border-left: 1px solid blueviolet;
   border-right: 1px solid blueviolet;
   background-size: 350px 300px;
 }

 .topRise {
           top: 0px;
           left: 0px;
         }

 .bottomRise {
       top: 500px;
       left: 0px;
 }
Pepo_rasta
  • 2,842
  • 12
  • 20
  • its not working even after adding background position. – user3176413 Aug 24 '15 at 09:33
  • function topRise() { $(".topRise").animate({ top: "-300px" }, 30000, topSet); }; function botRise() { $(".bottomRise").animate({ top: "0px" }, 30000, botSet); }; function topSet() { $(".topRise").css({ //"display": "none", "top": "0px" }); topRise(); }; function botSet() { $(".bottomRise").css({ //"display": "none", "top": "300px" }); botRise(); }; botRise(); topRise(); – user3176413 Aug 24 '15 at 09:34
  • actually i want background image to start rising from a particular height towards top upto a particular height on the web page – user3176413 Aug 24 '15 at 10:05