画像配置CSS

Question

私は4896x421の画像 を持っています。この画像は左に移動します。「この画像はありません」 「実際の」画像の左右の画像を繰り返す方法はありますか？私は "白い斑点"がこのイメージをシフトさせないのですか？

開始位置：

https://www2.pic-upload.de/img/32898925/2.png

私はイメージを編集した：divが、数秒後には "ホワイトスポット"

https://www2.pic-upload.de/img/32898926/1.png

（右側に白い斑点）を持っていませんだから私は時間に画像を取って、お互いの隣に横に並べると、1つの大きな画像のように見えますが、画像全体を表示せずに常にdivを埋めることができますか？

$('#bg1').animate({'left': 1000},10000,'linear');

#wrapper { 
 
\t top: 75px; 
 
\t left: 5px; 
 
\t width:1777px; 
 
\t height:1000px; 
 
\t overflow: hidden; 
 
\t position:relative; 
 
} 
 

 
.bg{ 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t position: absolute; 
 
} 
 
#bg1{ 
 
\t background-image: url("../img/bg3.png"); 
 
    background-color:#000; 
 
\t background-repeat: repeat-x; 
 
\t z-index: 10; 
 
\t height: 100%; 
 
\t width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
\t \t \t <div id="bg1" class="bg"></div> 
 
</div>

TYみんな！

Answer 1

お試しください！

JSfiddle with comments

$(function() { 
 
    var $image = $('#bg1'); 
 
    var imgW = $image.css("background-size").replace('px', ''); //negative number of backgroung image size 
 
    
 
    //comment out if you want it to move from right to left 
 
    imgW = imgW * -1; 
 
\t var num = 0; 
 

 
    function animate_img() { 
 
    \t if (num == 1) { 
 
    \t num = 0; 
 
     $image.css("background-position-x", "0") 
 
    } 
 
    
 
    $image.animate({ 
 
     backgroundPositionX: imgW + 'px' 
 
     }, 10000, "linear", 
 
     function() { 
 
     num = 1; 
 
     animate_img(); 
 
     }); 
 
    } 
 
    animate_img(); 
 
});

.bg { 
 
    top: 0px; 
 
    left: 0px; 
 
    position: absolute; 
 
} 
 

 
#bg1 { 
 
    background: url('https://www2.pic-upload.de/img/32898905/bg3.png') 0 0 repeat-x; 
 
    background-size: 1000px; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="bg1" class="bg"></div> 
 
</div>