CODEWITHSUNDEEP
jquerycsscss-transitions
user1823055
user1823055

Reputation: 91

Slowly Sliding Page Background Image

I am trying to make a suttle effect using the background image. I am trying to make it move very slowly to the left then stop once the whole image has been seen.

At the moment the image does not move at all.

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
width:100%;
height:100px;
top:0;
background-image:url('http://upload.wikimedia.org/wikipedia/commons/0/0c/Yercaud_scenery.jpg');
position:relative;
-webkit-animation:mymove 4s infinite; /* Safari and Chrome */
}


@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;left:-70px;}
25%  {top:0px;left:-50px;}
75%  {top:0px;left:30px;}
100% {top:0px;left:31px}
}

</style>
</head>
<body>

<p>here is some sample text</p>



</body>
</html>

Any help would be greatly appreciated. I am not bound to only using css but would prefer if possible.

Upvotes: 1

Views: 2127

Answers (1)

user1823055
user1823055

Reputation: 91

Instead of using keyframes through css I wanted something lighter and simpler. I have seemed to have found a solution involving the use of a few lines of jquery & css.

The Javascript:

<script>
$(function(){
$("body").animate({backgroundPositionX : "-450"}, 25000);
});
</script>

The CSS:

<style type="text/css">
  body {
    background-image: url('../imgs/bg-image.jpg');
    background-repeat:repeat-x;
    }
</style>

Upvotes: 2

Related Questions