CODEWITHSUNDEEP
jqueryhtmlcss
user3176413
user3176413

Reputation: 29

Setting the background image at a particular place on the web page

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;
      }

Upvotes: 1

Views: 228

Answers (1)

Pepo_rasta
Pepo_rasta

Reputation: 2900

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;
 }

Upvotes: 2

Related Questions