Home/ Questions/Q 8850053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T12:48:37+00:00

I am trying to make a suttle effect using the background image. I am

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0